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>