webApp添加到iOS桌面

iOS中的safri浏览器能够将一个网页添加到桌面，当作一个独立的应用运行。

固然，这里咱们不讨论怎么去作一个webApp，这须要html5的相关知识和开发经验。

这里咱们只讲webApp添加桌面后到启动的相关细节。

全屏显示：

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

系统顶栏的颜色(黑色和白色)：

<meta name="apple-mobile-app-status-bar-style" content="white" /><meta name="apple-mobile-app-status-bar-style" content="black" />

桌面程图标(若是不设置，则图标会显示网页的截图)：

<link rel="apple-touch-icon" href="icon.png" />

可是，iOS会自做多情的给这个图标加上高光，若是想图标不被高光，能够这样：

<link rel="apple-touch-icon-precomposed" href="icon.png" />

若是想给不一样的设备匹配不一样的icon，能够加上size属性：

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

程序启动的过程当中，须要指定启动画面，不然，白屏或者截图是让人很不愉悦的。

iOS有ipad和iPhone/ipod touch之分。

ipad的启动画面是横竖屏分开的，画面的尺寸必须是1024*76八、768*1024。

iPhone 和ipod touch虽然都是竖屏的，可是却有Retina屏幕和非Retina屏幕之分；另外它们启动画面的尺寸并非屏幕的大小，而是(屏幕宽度)*(屏幕高度 -20)。也就是说，非Retina的尺寸为320*460，Retina屏幕的尺寸为640*920。

引入启动画面是支持媒体查询的。

所以，能够经过media query给ipad的横竖屏引入不一样的图：

<link rel="apple-touch-start-image" href="landScape.png" madia="screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:landscape)" /><link rel="apple-touch-start-image" href="portait.png" madia="screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:portait)" />

可是媒体查询却搞不定Retina屏幕，因此经过js来hack：

首先，给普通的分辨率引入320*460的图片：

<link rel="apple-touch-start-image" href="start.png"media="screen and (max-device-weidth:320px)" />Retina屏幕js:

if((app.device.type === "iPhone" || app.device.type === "iPod")    && app.device.version >= '5'    && window.devicePixelRatio >= 2){        $('head').append($('<link rel="apple-touch-startup-image" href="start-640-920.png" />'));}

 

来自 <http://zhan.renren.com/loveisyou?gid=3602888498035808616&checked=true>