整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
phone6及iphone6plus已经出来一段时间了。很多移动端网站，以前写死body为320px的，现在估计也忙着做适配了。
大屏幕手机其实一直有，只是以前大家没怎么重视，移动端的H5页面大部分都以320px为基准宽度进行布局，那些大屏屌丝android用户也懒得去理，而现在iphone也搞起多屏幕，老板们重视程度就不一样了。
回归正题，兼容iphone各版本机型最佳的方式就是自适应。
1、viewport简单粗暴的方式：
<metaname="viewport"content="width=320,maximum-scale=1.3,user-scalable=no">
直接设置viewport为320px的1.3倍，将页面放大1.3倍。
为什么是1.3？
目前大部分页面都是以320px为基准的布局，而iphone6的宽度比是375/320=1.171875，iphone6+则是414/320=1.29375
那么以1.29倍也就约等于1.3了。
2、ip6+的CSSmediaquery
@media(min-device-width:375px)and(max-device-width:667px)and(-webkit-min-device-pixel-ratio:2){
/*iphone6*/
}
@media(min-device-width:414px)and(max-device-width:736px)and(-webkit-min-device-pixel-ratio:3){
/*iphone6plus*/
}
PS:也可以直接使用实际的device-width：如device-width:375px
在原有页面的基础上，再针对相应的屏幕大小单独写样式做适配。
3、REM布局
REM是CSS3新增的一种单位，并且移动端的支持度很高，android2.x+，ios5+都支持。
REM是相对于dom结构的根元素来设置大小，也就是html这个元素。相较于em单位，rem使用上更容易理解及运用。
REM与PX的换算可以查看网址：https://offroadcode.com/prototypes/rem-calculator/
假设，html我们设置font-size:12px;也就是说12px相对于1rem，那么18px也就是18/12=1.5rem。
那么我们以320px的设计布局为基准，将html设置为font-size:100px，即100px=1rem。(设置100px是为了方便计算)那么可以将大部分px单位除以100就可以直接改成rem单位了。
REM如何做响应式布局？
1、如果仅仅是适配ip6+设备，那么使用mediaquery就行。
伪代码如下：
/*320px布局*/
html{font-size:100px;}
body{font-size:0.14rem/*实际相当于14px*/}
/*iphone6*/
@media(min-device-width:375px)and(max-device-width:667px)and(-webkit-min-device-pixel-ratio:2){
html{font-size:117.1875px;}
}
/*iphone6plus*/
@media(min-device-width:414px)and(max-device-width:736px)and(-webkit-min-device-pixel-ratio:3){
html{font-size:129.375px;}
}
这样，在ip6下，也就将页面内的元素放大了1.17倍，ip6+下也就是放大了1.29倍。
2、如果是完全自适应，那么可以通过JS来控制。
(function(doc,win){
vardocEl=doc.documentElement,
resizeEvt='orientationchange'inwindow?'orientationchange':'resize',
recalc=function(){
varclientWidth=docEl.clientWidth;
if(!clientWidth)return;
docEl.style.fontSize=100*(clientWidth/320)+'px';
};
//AbortifbrowserdoesnotsupportaddEventListener
if(!doc.addEventListener)return;
win.addEventListener(resizeEvt,recalc,false);
doc.addEventListener('DOMContentLoaded',recalc,false);
})(document,window);
页面初始化的时候计算font-size，然后再绑定resize事件。这种效果就和百分比布局一样了。
那么用REM做单位与百分比做单位有什么优势？
主要优势在于能更好的控制元素大小。（一般百分比应用在布局层，一般常见设置为50%，33.3%，25%之类的整数居多，难以运用在复杂的页面小部件内）。
但是相比百分比布局，需要借助JS或mediaquery实现，略有一点瑕疵。
DEMO地址
4、图片自适应
刚说完REM布局，那么用百分比布局也能实现一样的效果，但是用百分比布局，必须要面临一个问题：图片宽度100%，页面加载时会存在高度塌陷的问题。.
那么可以用padding-top设置百分比值来实现自适应。
公式如下：
padding-top=(ImageHeight/ImageWidth)*100%
原理：padding-top值为百分比时，取值是是相对于宽度的。
相关代码实现：
<divclass="cover">
<imgsrc="http://www.hmttv.cn/uploadfile/2024/1012/20241012093001770.jpg"alt=""/>
</div>
.cover{position:relative;padding-top:100%;height:0;overflow:hidden;}
.coverimg{position:absolute;top:0;width:100%;}
DEMO地址，缩放浏览器窗口看看。
5、图片高清化
大家都知道，iphone6plus是3倍高清图了，它的devicePixelRatio=3。
在ios8下，已经开始支持img的srcset属性了（目前移动端也就ios8开始支持），也就是说，可以对一张图片设置2个URL，浏览器自动加载对应的图片。
黄色表示仅支持旧的srcset规范，绿色表示支持全新的srcset规范，包括sizes属性，w描述符。这里不展开，详细了解可自行google。
不过目前前端这边图片的实现基本都用lazyload的方式实现。srcset的图片加载方式在实际项目中运用还比较少。
6、背景图高清化
mediaquery实现高清化
img标签的高清化，可以通过JS判断devicePixelRatio的值来加载不同尺寸的图片，但是对于背景图，写在CSS中的，用JS来判断就略麻烦了，还好CSS通过mediaquery也能判断dpr。
目前兼容性最好的背景图高清化实现方式，使用mediaquery的-webkit-min-device-pixel-ratio做判断：
/*普通显示屏(设备像素比例小于等于1)使用1倍的图*/
.css{
background-image:url(img_1x.png);
}
/*高清显示屏(设备像素比例大于等于2)使用2倍图*/
@mediaonlyscreenand(-webkit-min-device-pixel-ratio:2){
.css{
background-image:url(img_2x.png);
}
}
/*高清显示屏(设备像素比例大于等于3)使用3倍图*/
@mediaonlyscreenand(-webkit-min-device-pixel-ratio:3){
.css{
background-image:url(img_3x.png);
}
}
进一步，可以通过工具生成相应的3x，2x，1x的图片及css，在使用时直接引用即可。谁搞一个？
关于移动设备的-webkit-min-device-pixel-ratio值，可以查看该网页的整理：http://bjango.com/articles/min-device-pixel-ratio/
image-set实现高清化
image-set，它是Webkit的私有属性，也是Css4的一个属性，它是为了解决Retina屏幕下的图像显示而生。
使用方式也很简单。伪代码如下：
.css{
background-image:url(1x.png);/*不支持image-set的情况下显示*/
background:-webkit-image-set(
url(1x.png)1x,/*支持image-set的浏览器的[普通屏幕]下*/
url(2x.png)2x,/*支持image-set的浏览器的[2倍Retina屏幕]*/
url(3x.png)3x/*支持image-set的浏览器的[3倍Retina屏幕]*/
);
}
目前移动端的支持程度来看，ios7+，android4.4+下已经支持了。如果仅仅是做ip6+的高清适配方案。image-set也是一种实现方案。
使用image-set与mediaquery实现有什么区别及好处？
这篇文章里面做了很详细的阐述，大家可以看看：http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to-support-retina-images/
大体的意思是：image-set不需要告诉浏览器使用什么图像，而是直接提供了图像让浏览器选择。这就意味着，如果在低网速下，浏览器可以选择加载低分辨率的图片。（PS：好智能的样子）
但是相比如mediaquery的实现，image-set仅支持单个图片的高清化，不适合在csssprite下使用。并且兼容性也是一大硬伤。
但是一般来说，用在LOGO区域，单个图片图标的区域下，也是个不错的选择。
7、图片列表的自适应
关于适配，也就是要让布局更灵活，在电商网站里面，商品列表是一个非常常见的结构。
一种比较智能的列表方式是：两端对齐，间距自适应。
那么可以使用FLEXBOX布局来实现两端对齐的效果，也可以使用text-align:justify的方式实现。
先看个flex实现的例子，主要通过justify-content:space-between，来实现：
flexbox的布局方式，在PC端就不合适了，ie9以下都不支持，那么更友好的方式可以使用text-align:justify来实现，兼容各大主流浏览器，包括IE6。
但是这2种布局方式都有一定的局限性。就是列表个数必须凑整。目前还没找到一种能够兼容不限个数的实现方案，如果各位看官有更好的实现方式，也欢迎提出，一起交流。
移动端ip6的适配方案有很多，没有固定的套路及方法，请根据自身业务的特点，选择其中的一些方法组合使用。
跨无忧（www.kuawuyou.com）来自“跨屏无忧”的想法，我们首个推出永久的、不依赖第三方的跨屏幕适配方案，希望以我们专业的力量帮助每个企业都能实现在移动互联网的转变，让企业网站轻松无忧完成到移动设备的跨屏幕适配，快速抓住移动互联网机遇。
上周五举行的Gamer 2015大会上，白鹭引擎创始人兼CEO陈书艺先生带来了题为《2015 触手可及：白鹭引擎助推“手游新市场” 》的演讲，对白鹭引擎2014年的工作进行了总结回顾，对业界最关心的几个HTML5游戏相关的问题进行了解答，并通过H5游戏案例展示了H5游戏的发展现状。
以下为演讲实录，经游戏葡萄整理发布。
大家好，为什么我要讲HTML5？HTML5已经不是一个新概念了，我觉得今年它的市场才逐渐落地成熟。第一代HTML5是在PC上，但HTML5真正落地是在移动游戏市场。我认为HTML5是对游戏流量的解放，是对生产力的解放，也是对营销及运营的解放。
65天以前，我们办了一次HTML5大会，现场来了1350多位嘉宾。很多人因为我们受到启发，对HTML5有了新的认识。
HTML5一直都有人关注，包括Facebook和苹果，全世界范围内拿到千万美金级投资的游戏公司非常多，一直没有出成绩是因为没有人完善和构建整个生态最后一公里的工作。白鹭引擎在2014年主要做了三个工作，第一个是白鹭引擎本身，第二个是工具链，第三个是标准级的产品。HTML5很复杂，但我们利用漏斗效应，把它抽象出来；利用我们的技术去封装，把游戏的标准制定出来。
白鹭引擎的工具很好用，使得开发HTML5很简单。我们的引擎团队吸收了Adobe的精英，标准的技术和高效的工作流，使得开发HTML5芯片变成很简单的事情。再加上硬件、网络、应用场景各方面的净化、巨大的人口红利，HTML5游戏才变成可能。到了现在这个阶段缺的是什么呢？是内容。我们现在已经有上万的开发者，但还是缺少精品内容，所以我们依然在做最后一公里的推进工作。
上次HTML5大会之后，我们做了哪些事情呢？大会上很多人都说我们在抛概念，在忽悠。实际上这次大会以后，我们连续发布了11个产品，每个产品都已经落地。这些都是工具性的产品，而且都是双周迭代的，在线上陪伴着我们的开发者。我们就像小米一样，一边更新产品，一边跟开发者打交道，跟随着游戏项目去雕琢这些产品。节奏非常快，每两周就更新一个版本，我们的Runtime产品已经完成了国内渠道的集成。
在大会上，我抛出了“灯塔计划”这个概念，主要是针对早期中小型团队的扶持计划，包括资本、流量、技术等方面的支持，也有针对老牌大厂商的内容。
很多人都很喜欢辩论这个话题“到底未来是属于HTML5还是属于APP？”其实真正好的形态是出现在移动设备上的，而所有的移动APP本身就是浏览器，传统浏览器上的访问流量只占不到7%。微信本身就是全世界最大的浏览器之一，它上面的所有内容都基于HTML5。我们认为未来是HTML5和APP相辅相成的关系，HTML5游戏有巨大的市场。HTML5游戏拥有独特的魅力，包括跨平台、即点即玩、超大流量、超低研发成本。无论是营销落地的东西，还是游戏内容制作，跟我们息息相关，都给我们带来新的机会用新的方式去营销，用新的方式去开发游戏，用新的方式创造用户体验。
我们推出了Runtime这个产品。首先HTML5是一个跨平台的技术，它的系统非常庞大，要适配不同的分辨率、浏览器、内核和不同的操作系统，光安卓就有十几个版本，是极其碎片化的。其次，它的性能瓶颈使得它在目前只能做一些小游戏。再次，我们这个产品还能丰富游戏体验，可以加强触摸、震动、声音，甚至是蓝牙、位置等等方面的功能。大家目前看到的只是一部分，我们已经帮助国内绝大多数渠道完成了本身的生态升级。QQ浏览器、QQ空间、手Q、微信全部都是使用HTML5的技术进行内核的渲染，小米更是进行了整个操作系统的植入。大家可以下载最新版的猎豹浏览器，已经嵌入了Runtime，下图左边是手机游戏的尝试，他们花了很短的时间做了一个打飞机的游戏。
我选了一部分大家会特别关心的问题。第一个问题是流量导入的形式和手段，如何快速的引流和留住用户？简单来说，HTML5的导流方式非常多，不仅是浏览器和微信朋友圈。很多人认为HTML5游戏就是微信朋友圈小游戏，而实际上朋友圈小游戏在HTML5游戏中所占的比例只有15%。
未来手机游戏操作系统的桌面、通知、WIFI停靠页、社交软件都是HTML5的平台。此外还包括线下，大家在电梯里看到一个广告，以前跟网络没有任何关系，现在只要扫描二维码就可以联网。其实引流的方式非常多，手机上所有的APP流量都可以被解放出来做导流。
第二个问题是还有哪些适合HTML5的新游戏类型。其实还有跨屏幕的体验，不仅是手机、iPad上，电视也是屏幕，此外很多屏幕都可以运行HTML5的游戏，只要基于浏览器内核和云系统就可以。昨天微软刚刚召开了Windows10的发布会，所有的系统都用一套标准。将来任何一个原生的软件，甚至是像office这样庞大的软件，都可以基于我们的技术进行开发。包括XBox和掌机，都可以联网，都可以跨平台，都可以云通讯，都可以用HTML5这种形式
接下来给大家介绍一些案例。大家对HTML5一直停留在小游戏的印象和概念里，我今天放出一些游戏的截图，其中有些是比较重度的游戏，有RPG，也有动作。
这个是在H5大会之后开心网做的《一统天下》，他们在海外已经做到一两千万的收入了。在没有支持的情况下，他们已经可以独立地用我们的引擎进行开发，它的原生版本以及我们会帮他们推广的HTML5版本全部都采用我们的引擎技术，一款成熟的页游或者是手游用白鹭引擎转成HTML5是非常简单的事情。
《叫我恶魔大人》是一款动作类游戏，也是重度的动作类游戏。
JJ竞技非常擅长做棋牌和休闲类的游戏。这些都是他们用我们的引擎做出来的游戏。用我们的引擎可以上更多的平台、更多的介质，甚至可以进行线下体验。
HTML5游戏在这个阶段，还不够成熟，从吸量的角度来说，单款单渠道一天的吸量，新增是8-15万之间，每天有3-30万的注册用户。留存率还是比原生的低一些，频率在15%左右。付费率和原生是比较接近的，大概在1.5%左右。我们现在还是比较缺少重度和经典的游戏。
再介绍一下白鹭2015年会推出的两个东西。一个是整合的工具，可以做动画，也可以编辑场景，也可以打包游戏。另外就是3D，未来白鹭引擎和工具会集体升级至支持3D游戏制作。引擎核心的部分已经完成，现在还在完善制作工具，希望可以使得制作一款3D的HTML5游戏变成极其简单的事情。
2015年，我们将会同游戏葡萄联合发布每月的HTML5游戏月度观察，会有行业数据、每月经典案例、人物专访和重要的行业新闻。
2月27日，借着HTML5移动游戏大会的余温，Egret白鹭引擎在贝塔咖啡举办了主题为“HTML5游戏开发优化之路”第一期技术分享沙龙。继续与开发者、运营商、渠道等行业各界一道，分享HTML5移动游戏开发实践中的优化之道。 白鹭时代作为国内首屈一指的HTML5移动游戏开发引擎、工具与运行时提供商，其一线核心技术人员参与了本次沙龙，除此之外，还邀请了业内从事HTML5游戏领域资深人士作为嘉宾一起探讨交流。沙龙中的交流与探讨，汇聚了HTML5行业前景展望、Egret开发实践、以及大家在HTML5游戏中的开发分享总结等目前行业各界关注的内容。在如此寒冷的冬季，白鹭时代为HTML5移动游戏行业点燃了一份激情。
沙龙伊始，Egret白鹭引擎联合创始人马鉴为大家介绍了HTML5移动游戏领域新生态。马鉴认为，如今大型的原生游戏发展缓慢，主要在于发行模式的固化，一定程度限制了整个市场更上一层楼。开发商面对渠道和发行为王的大环境，面临越来越艰难的选择。而未来移动游戏的发展趋势，应该是HTML5生态与移动App共赢的状态。现在众多的开发商、发行商、渠道商都开始在这个领域大力投入，使得HTML5前景持续看俏，应用触角更伸展至手机、平板、电视甚至可穿戴移动设备等各类连网装置，为HTML5移动游戏市场带来了莫大商机。
随后，Egret白鹭引擎社区技术经理张鑫磊（A闪）为大家带来了主题为《Egret打造高性能HTML5游戏》的分享内容。介绍了Egret白鹭引擎在本月发布的最新版本1.5中对性能优化的新功能。其中涉及到引擎的脏矩形、弹性跑道模型、模块化编译等相关技术。同时，借助Egret Runtime可加速Egret HTML5游戏，让HTML5游戏在移动端拥有接近原生性能与品质。
紧接着，Egret白鹭引擎高级研发经理张晨为大家介绍了Egret最新的开发工具：Egret Wing与EgretVS。通过Egret Wing可以快速开发游戏界面，使用Egret Wing与EgretVS搭配使用可快速提高游戏开发效率，让游戏开发变得简单高效。
临近沙龙尾声，来自Egret社区的开发者代表张宇，结合他在使用Egret白鹭引擎开发游戏的一些实战经验进行了分享；网易前端工程师魏阳（小恐龙）通过简单的优化技巧，包括混色，碰撞检测，横版适配和效率优化等，教现场的大家用HTML5做一款效率与效果并存的打飞机游戏；最后压轴嘉宾来自HTML5游戏创业者起源天泽的CEO谭凯，带来“Canvas优化技巧，不仅是程序的工作，更是团队的配合，其中缩小分辨率，禁用旋转，双重刷新是几个重要的优化手段，结合美术射击来使用，会极大的提升游戏的质量和体验”的精彩分享。
移动互联网市场，APP派和Web分成两大阵营争斗已久。App素以良好的用户体验迅速俘获用户芳心，沐浴无尽恩宠。然而，原生APP受制于跨平台开发和运行的难题，其发展的极限已经浮现，在移动游戏领域同样如此。HTML5技术的兴起，特别是白鹭时代携引擎、工具和运行时到来，让移动游戏拥有了面向HTML5技术转型的基础。
白鹭时代此前发布的全新的Egret Engine 1.5引擎，以及一系列的开发工具和运行时，不但继续强化了HTML5移动游戏的开发服务，同时让基于Egret Engine（白鹭引擎）开发的移动游戏，具备了媲美原生App游戏的用户体验。相信在不久的将来，HTML5移动游戏，与原生的App游戏，将会成为两大主流，为广大用户，带来更加多样化，同时更具体验感的移动游戏。
关于Egret Engine：
Egret Engine（白鹭引擎）是白鹭时代推出的一款基于TypeScript语言构建的开源免费的移动游戏引擎。通过白鹭引擎，开发者可以快速地创建可以运行在手机App的WebView或浏览器中的HTML5移动游戏，也可以编译输出成基于Android、iOS、Windows Phone的跨平台原生移动游戏。
白鹭引擎官网：http://www.egret-labs.org/
*请认真填写需求信息，我们会在24小时内与您取得联系。
