webapp mobile 开辟进阶

http://developer.51cto.com/art/200906/131335.htm

meta 标签  
苹果ios 体系从4.2开端就支撑 apple-touch-icon 属性，在meta 标签中指定它的值可以使得你的网页在保存至主屏时，显示为自定义的icon，而不是网页的缩略图。 

<link rel="apple-touch-icon" href="/custom_icon.png"/>
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

苹果供给了sizes这个属性，为了便利适应多设备。而若是你不指定这个属性，默认size 会是57 * 57大小。别的对应 apple-touch-icon 苹果还有别的一个属性 apple-touch-icon-precomposed 他们的不合之处就是，但应用  apple-touch-icon-precomposed  属性的时辰，苹果不会给桌面图标加一个高光结果。 
苹果体系3.0今后就支撑 Startup Image 属性，webapp 在苹果上可以给网页声明StartUp Image ，使合适webapp 从主屏打开时，会有一张封面，很类似原生app。然则被声明的对于iphone和itouch 大小只能是 320 x 460 ，其他大小的都无效。然则同样你可以经由过程sizes 来进行多设备适配 

<link rel="apple-touch-startup-image" href="/startup.png">
//for iphone Retina Display high 
<link rel="apple-touch-startup-image" sizes="640 x960" href="img/splash-screen-640 x960.png" />
//for iPad Landscape
<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />
//for iPad Portrait
<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />

在主屏打开时隐蔽地址栏，须要指定一个apple-mobile-web-app-capable 的meta标签 

<meta name="apple-mobile-web-app-capable" content="yes" />

以上和保存到主屏相干的都是iphone only，这里有更具体的申明。 
适应屏幕显示，也可以经由过程设置 user-scalable 阻拦用户，经由过程手势放大和缩小页面大小。 

<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=device-width，initial-scale=1.0，maximum-scale=1.0，minimum-scale=1.0，user-scalable=no" />

CSS  
有些CSS 属性会影响你的衬着，甚至会使你的浏览器溃散。你须要稳重应用的CSS属性： 
的圆角属性、区域的暗影、CSS 渐变 

-webkit-box-shadow
-webkit-border-radius
-webkit-gradient

然而地位布局可能会使得你不得不消绝对定位或是相对定位，对于衬着，过多绝对定位或是相对定位的元素，会使得你的浏览器不堪重负而溃散。这点在mobile safari 上表现的很明显。所以也尽量少应用绝对定位来完成布局。 

position:absolute
position:relative

关于应用css3动画的时尽量哄骗3D加快，从而使得动画变得流畅。动画过程中的动画闪白可以经由过程backface-visibility 隐蔽。 

-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;

js事务  
click 事务广泛 300ms 的延迟 
在上绑定click 事务，会使得操纵有300ms 的延迟，体验并不是很好。 
开辟者大多半会应用封装的 tap 事务来庖代click 事务，所谓的 tap 事务由 touchstart 事务 + touchmove 断定 + touchend 事务封装构成: 
当touchstart 开端时，监测是否产生touchmove，按照返回的成果来断定是否在touchend 的时辰，履行回调。 
或者你可以尝尝 mike brook 写的thumbs.js 
在浏览器上a 标签会有一个丢脸的点击暗影（在andriod上尤其丢脸）这个暗影可以经由过程改变CSS 属性 -webkit-tap-highlight 往来交游掉。 

本地存储  
localStorage: 
原生的localStorage 只支撑字符串存储，应用不便利。不克不及直接存json格局，真正开创议来还是须要本身封装一下。或者尝尝lawnchair， 一个简单的json 存储器。大小只有5k， http://westcoastlogic.com/lawnchair/ 

轻量的 js 类库  
移动js类库再用jquery会显得十分重，其实有很多其他轻量然则同时支撑类似jquery api的类库，例如zepto，xuijs，  jqmobi， 他们经由过程封装了很多原生的高等浏览器支撑的api例如：querySelector forEach， 甚至有些直接封装了 touch一系列的事务，包含gesture，在 zepto 中做成了插件情势。关于类库小我斗劲推荐前两个，后斗劲新，然而一个速度也很快值得存眷，然则今朝还是有很多bug。 

引用

zepto：https://github.com/madrobby/zepto 
sxuijs：http://xuijs.com/ 
jqmobi: http://www.jqmobi.com/

关于缓存  
对于浏览器缓存机制相对andriod ，iphone 限制会斗劲大，在IOS3.X之后不克不及缓存单个文件跨越15kb，在ios4 这个限制是25kb，想最大哄骗缓存的同窗可能要衡量一下大小和http request了。 
应用manifest 离线你的静态资料，manifest 只有在用户清除了浏览器中存储有你的站点的数据或是 manifest file 被批改了才会进行更新。 

参考： 
苹果官方开辟者网站关于webapp的设备 
mobile-browser-cache-limits 
debugging-mobile