這篇文章講述關於IOS觸屏網站meta的定義對網站的一些效果或者說是功能的幫助。

從最基本的講：

移動客戶端對meta的定義有幾項通用定義：

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" >

<meta content="telephone=no" name="format-detection" />

第一個meta標籤表示：

• 強制讓文件與裝置的寬度保持1：1；
• 文件最大的寬度比列是1.0（initial-scale初始刻度值和maximum-scale最大刻度值）；
• user-scalable定義是否可縮放（0為不縮放），使頁面固定裝置上面的大小。

（注意：實際測試中發現，HTC G7自身系統瀏覽器不支援這一條規則，能夠對頁面進行放大，一旦放大響應的box也隨之放大，導致俄頁面出現錯亂問題，解決方法：定義頁面的最小寬度 min-width，body{min-width: 300px;}）

第二個meta標籤表示：

• 使裝置瀏覽網頁時對數字不啟用電話功能（不同裝置解釋不同，itouch點選數字為存入聯絡人，iphone為撥打電話），忽略將頁面中的數字識別為電話號碼。

若需要啟用電話功能將telephone=yes即可，具體呼叫格式可以這樣書寫程式碼<a href=”13888888888″>Call Me</a>，若在頁面上面有google maps, iTunes和youtube的連結會在ios裝置上開啟相應的程式元件。

IOS裝置對meta定義的私有屬性：

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

這裡要詳細的介紹一下ios裝置對這兩個meta的功能作用（外界通稱該應用為“離線app”，但從字面意思上面會有誤解，以為只能脫離網路，所以在這裡我還是用web app描述。）：

該meta可以看出內容為“蘋果裝置web 應用程式xx”，就是說該meta是專門定義web 應用的，但是什麼是web app呢？

web app就是HTML5的應用，例如可以開發一個html5的應用程式（如：小蜜蜂、俄羅斯方塊、水電氣費查詢等），基於html5的引用ios方面對這塊兒的支援在移動裝置上算是領先了。為什麼繼續往下看：

圖片一：在網站中進行儲存

圖片二：儲存至主螢幕

圖片三：填寫名稱

圖片四：主螢幕中樣式

圖片五：啟動時的啟動介面

圖片六：啟動完成後的介面

圖片七：後臺執行圖示-獨立存在

圖片八：編輯圖示

圖片九：刪除圖示提示

從圖中可以看出該程式的執行外觀上是脫離於瀏覽器的，實際上也是通過瀏覽器核心渲染出的，可以看作是一個app應用程式在執行，類似快捷方式。

web app 最大的好處有兩點：

• 不需要通過蘋果商店釋出。
• 開發成本低，直接通過html5技術和蘋果提供的js函式，能夠做出滑動等效果，效果上面能夠完全模擬應用程式效果，非常適合企業做客戶端使用。

最明顯的缺點：

• 不支援推送（push）。

大家都知道 HTML5 帶來的革新，其中有一項功能就是對push的支援（現在PC上chrome支援push），雖然在蘋果上面目前還不能實現此功能，以後應該會開發這塊兒功 能（感覺如果web app支援推送，那麼對他自己本身app store業務應該會有影響吧！！！）。

還是來說下這兩個meta對web app的設定吧~

第一個meta：

<meta name="apple-mobile-web-app-capable" content="yes" />

說明：

• 網站開啟對web app程式的支援。

第二個meta：

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

說明：

• 在web app應用下狀態條（螢幕頂部條）的顏色；
• 預設值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）。

注意：

• 若值為“black-translucent”將會佔據頁面px位置，浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina螢幕為40px）。
• 具體檢視圖片十、圖片十一、圖片十二。

糾正：

• 之前查閱了一些資料，說apple-mobile-web-app-status-bar-style屬性為隱藏狀態列，其實這是一個誤解，在這裡為大家糾正一下這個問題。

圖示：

圖片十：black狀態

圖片十一：default狀態

圖片十二：black-translucent狀態

兩個meta的設定即可對web app程式進行支援了。

蘋果web app其他設定：

當然，配合web app的icon 和 啟動介面需要額外的兩端程式碼進行設定，如下所示：

<link rel="apple-touch-icon-precomposed" href="iphone_milanoo.png" />

說明：

• 這個link就是設定web app的放置主螢幕上icon檔案路徑（圖片四）。

使用：

• 該路徑需要注意的就是放到將網站的文件根目錄下但不是伺服器的文件的根目錄。
• 圖片尺寸可以設定為57*57（px）或者Retina可以定為114*114（px），ipad尺寸為72*72（px）

<link rel="apple-touch-startup-image" href="milanoo_startup.png" />

說明：

• 這個link就是設定啟動時候的介面（圖片五），放置的路勁和上面類似。

使用：

• 該路徑需要注意的就是放到將網站的文件根目錄下但不是伺服器的文件的根目錄。
• 官方規定啟動介面的尺寸必須為 320*640（px），原本以為Retina螢幕可以支援雙倍，但是不支援，圖片顯示不出來。

還要說明下，如圖三，裡面的預設名稱為程式碼title標籤的內容。

至此，一個web app建立完成。

如果對web app的這兩個meta還有不能詳細理解的可以檢視官方解釋：

關於link方面還有更多的引數設定（例如：ipod、ipad、iphone不同尺寸不同圖示），可以檢視官方標準文件：

後話：雖然web app可能是將來移動網站的應用趨勢，但目前能夠看見一些不夠強大的地方，就目前的ios4的裝置而言之前就被報道過，web app的執行效能不高，還存在遲緩現象，原因是safari 本身有個javascript的加速引擎，但是web app雖然是通過webkit核心渲染，但是未在safari進行執行，所以js引擎將無法對其進行加速作用。