前言
iOS上的一個(gè)Web App（下圖中的「念」）和Native App(原生應(yīng)用)在外觀上看起來(lái)基本上一樣，但是其使用的技術(shù)是HTML，CSS，Javascript，而不是原生應(yīng)用所使用的Objective-C。
本文簡(jiǎn)單介紹一下如何把一個(gè)Web站點(diǎn)改造成iOS上的Web App，這里假設(shè)你的網(wǎng)站是響應(yīng)式設(shè)計(jì)（responsive design）或者已經(jīng)做過(guò)移動(dòng)端的適配。
viewport
我們?cè)贖TML中加上viewport(這里假設(shè)用戶(hù)已經(jīng)對(duì)viewport有所了解) meta標(biāo)簽：
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
其中width=device-width指的是移動(dòng)瀏覽器所顯示的寬度等于設(shè)備的物理寬度，initial-scale=1.0指的是初始縮放倍數(shù)為1.0(即不縮放)，maximum-scale=1.0指的是最大的縮放倍數(shù)是1.0，user-scalable=no指用戶(hù)不可以手動(dòng)進(jìn)行縮放。這些參數(shù)請(qǐng)根據(jù)自己的情況進(jìn)行調(diào)整。本站調(diào)整完成后，效果如下：
Icon
當(dāng)用戶(hù)通過(guò)safari訪(fǎng)問(wèn)我們網(wǎng)站的時(shí)候，用戶(hù)是可以把網(wǎng)站的URL以一個(gè)快捷方式的形式添加到主屏幕的，展示形式跟原生的應(yīng)用是一樣，所以我們要給我們的網(wǎng)站添加應(yīng)用Icon。
iOS所用的icon是png格式的，其提供了apple-touch-icon和apple-touch-icon-precomposed兩種icon，使用方式如下：
- <link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
- <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png"/>
以上你只能選其一，二者的區(qū)別在于如果使用apple-touch-icon，那么iOS會(huì)給icon加上一些NB的效果，包括圓角，陰影，反光。如果使用apple-touch-icon-precomposed則iOS不會(huì)加這個(gè)效果。
如果你的網(wǎng)站也要可以在Ipad上訪(fǎng)問(wèn)，那么你還要針對(duì)不同的設(shè)備準(zhǔn)備不同尺寸的icon，你可以通過(guò)sizes屬性來(lái)指定icon的尺寸：
- <link rel="apple-touch-icon" href="touch-icon-iphone.png" />
- <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
- <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" />
- <link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" />
如果你不指定size屬性，那么默認(rèn)為57x57，我們可以看到ipad所需icon的尺寸是72x72，retina屏幕的iphone所需的尺寸是114x114，retina屏幕的ipad所需的尺寸是144x144。
如果沒(méi)有當(dāng)前設(shè)備所需尺寸的icon，那么iOS將會(huì)選用icon中所有大于此設(shè)備所需尺寸的最小的一個(gè)。如果沒(méi)有比設(shè)備所需尺寸大的icon，那么選用最大的那個(gè)icon。如果有多個(gè)符合條件的icon，那么iOS會(huì)選擇有precomposed關(guān)鍵詞的那個(gè)。
如果在HTML中沒(méi)有指定icon，那么iOS會(huì)到WEB根目錄下尋找對(duì)應(yīng)的icon。假設(shè)設(shè)備需要57x57的icon，那么iOS將以下面的順序進(jìn)行訪(fǎng)問(wèn)：
- apple-touch-icon-57x57-precomposed.png
- apple-touch-icon-57x57.png
- apple-touch-icon-precomposed.png
- apple-touch-icon.png
啟動(dòng)界面
像原生應(yīng)用一樣，你也可以給Web App加上一個(gè)啟動(dòng)界面，很簡(jiǎn)單：
- <link rel="apple-touch-startup-image" href="/startup.png">
在iPhone和iPod touch上，尺寸大小必須為320 x 460。
隱藏Safari用戶(hù)欄
為了更加像原生應(yīng)用，我們還可以對(duì)Safari的用戶(hù)欄和地址欄進(jìn)行隱藏，這個(gè)叫作standalone模式，加入以下meta進(jìn)入此模式：
- <meta name="apple-mobile-web-app-capable" content="yes" />
你可以通過(guò)window.navigator.standalone來(lái)檢測(cè)當(dāng)前是否是standalone模式。效果如下：
鏈接問(wèn)題
在Safari中，如果點(diǎn)擊一個(gè)鏈接，那么Safari將會(huì)打開(kāi)一個(gè)新的tab，顯然做為一個(gè)應(yīng)用這體驗(yàn)簡(jiǎn)直太差了，需要在HTML中加入以下JavaScript來(lái)阻止此行為：
- <script type="text/javascript" charset="utf-8">
- // Mobile Safari in standalone mode
- if(("standalone" in window.navigator) && window.navigator.standalone){
-
- // If you want to prevent remote links in standalone web apps opening Mobile Safari, change 'remotes' to true
- var noddy, remotes = true;
-
- document.addEventListener('click', function(event) {
-
- noddy = event.target;
-
- // Bubble up until we hit link or top HTML element. Warning: BODY element is not compulsory so better to stop on HTML
- while(noddy.nodeName !== "A" && noddy.nodeName !== "HTML") {
- noddynoddy = noddy.parentNode;
- }
-
- if('href' in noddy && noddy.href.indexOf('http') !== -1 && (noddy.href.indexOf(document.location.host) !== -1 || remotes))
- {
- event.preventDefault();
- document.location.href = noddy.href;
- }
-
- },false);
- }
- </script>
以上代碼來(lái)自gist。
最后
Have fun?。海?/p>
參考：
Configuring Web Applications
Everything you always wanted to know about touch icons
原文鏈接：http:///make-web-app-more-native.html
【編輯推薦】
