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*768、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" />‘));}

　　

webApp添加到iOS案頭