IOS 下webApp的启动画面设置

当通过IOS设备的safari打开我们的网站之后，可以将它们存到主屏幕上。这样使得它们更像一个app，通过对meta头标签的一些设置，更可以让应用以全屏的方式打开，这样就不会显示浏览器本身的地址栏等UI了。

更有趣的是，我们还能设置我们的webApp的桌面图标以及启动画面！

下面分别是iphone、ipod、ipad以及相应retina屏的图标及启动画面设置~需要注意的地方是启动画面的图片大小，在media属性我们可以看到宽高的值，但是这是包括了状态栏的，所以其实图片的真实大小的高度并不是media内的值而是href示例中的大小~

<!-- iPhone --> < link  href = "http://taylor.fausak.me/static/images/apple-touch-icon-57x57.png"        sizes = "57x57"        rel = "apple-touch-icon" > < link  href = "http://taylor.fausak.me/static/images/apple-touch-startup-image-320x460.png"        media="(device-width: 320px) and (device-height: 480px)           and (-webkit-device-pixel-ratio: 1)"        rel = "apple-touch-startup-image" > <!-- iPhone (Retina) --> < link  href = "http://taylor.fausak.me/static/images/apple-touch-icon-114x114.png"        sizes = "114x114"        rel = "apple-touch-icon" > < link  href = "http://taylor.fausak.me/static/images/apple-touch-startup-image-640x920.png"        media="(device-width: 320px) and (device-height: 480px)           and (-webkit-device-pixel-ratio: 2)"        rel = "apple-touch-startup-image" > <!-- iPhone 5 --> < link  href = "http://taylor.fausak.me/static/images/apple-touch-startup-image-640x1096.png"        media="(device-width: 320px) and (device-height: 568px)           and (-webkit-device-pixel-ratio: 2)"        rel = "apple-touch-startup-image" > <!-- iPad --> < link  href = "http://taylor.fausak.me/static/images/apple-touch-icon-72x72.png"        sizes = "72x72"        rel = "apple-touch-icon" > < link  href = "http://taylor.fausak.me/static/images/apple-touch-startup-image-768x1004.png"        media="(device-width: 768px) and (device-height: 1024px)           and (orientation: portrait)           and (-webkit-device-pixel-ratio: 1)"        rel = "apple-touch-startup-image" > < link  href = "http://taylor.fausak.me/static/images/apple-touch-startup-image-748x1024.png"        media="(device-width: 768px) and (device-height: 1024px)           and (orientation: landscape)           and (-webkit-device-pixel-ratio: 1)"        rel = "apple-touch-startup-image" > <!-- iPad (Retina) --> < link  href = "http://taylor.fausak.me/static/images/apple-touch-icon-144x144.png"        sizes = "144x144"        rel = "apple-touch-icon" > < link  href = "http://taylor.fausak.me/static/images/apple-touch-startup-image-1536x2008.png"        media="(device-width: 768px) and (device-height: 1024px)           and (orientation: portrait)           and (-webkit-device-pixel-ratio: 2)"        rel = "apple-touch-startup-image" > < link  href = "http://taylor.fausak.me/static/images/apple-touch-startup-image-1496x2048.png"        media="(device-width: 768px) and (device-height: 1024px)           and (orientation: landscape)           and (-webkit-device-pixel-ratio: 2)"        rel = "apple-touch-startup-image" >

另外iphone5这个特殊尺寸的启动画面的设置会稍有不同，它的宽度必须设置成device-width或者320.并且scale设置成1.0。

<!-- Letterboxed on iPhone 5 --> < meta  name = "viewport"        content = "width=device-width" > < meta  name = "viewport"        content = "width=320" > <!-- Not letterboxed on iPhone 5 --> < meta  name = "viewport"        content = "initial-scale=1.0" > < meta  name = "viewport"        content = "width=320.1" >