觸控螢幕網站開發系列（一）-ios web App應用程式（ios meta）

文章目錄

• 第一個meta標籤表示：
• 第二個meta標籤表示：
• 第一個meta：
• 第二個meta：

<meta name="viewport" content="width=device-width, initial-scale=1" /> pingmu

觸控螢幕網站的開發其實現在來講比前幾年移動端網站開發好多了，觸控螢幕裝置IOS、Android、BBOS6等系統內建瀏覽器均為WEBKIT核心，這就說明PC上面尚未立行的HTML5 CSS3能夠運用在這裡，極大的減少了工作量和資料的缺乏。

這篇文章講述關於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呢？

訪問:http://www.apple.com/webapps/ 你就能夠明白。

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還有不能詳細理解的可以查看官方解釋：

http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html

關於link方面還有更多的參數設定（例如：ipod、ipad、iphone不同尺寸不同表徵圖），可以查看官方標準文檔：

http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

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