webApp添加到iOS桌面

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

当然，这里我们不讨论怎么去做一个webApp，这需要html5的相关知识和开发经验。

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

全屏显示：

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

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

但是，iOS会自作多情的给这个图标加上高光，如果想图标不被高光，可以这样：

如果想给不同的设备匹配不同的icon，可以加上size属性：

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

iOS有ipad和iPhone/ipod touch之分。

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

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

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

因此，可以通过media query给ipad的横竖屏引入不同的图：

但是媒体查询却搞不定Retina屏幕，所以通过js来hack：

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

Retina屏幕js:

if((app.device.type === "iPhone" || app.device.type === "iPod")    && app.device.version >= '5'    && window.devicePixelRatio >= 2){        $('head').append($(''));}

来自