這篇文章講述關(guān)于IOS觸屏網(wǎng)站meta的定義對(duì)網(wǎng)站的一些效果或者說是功能的幫助。

從最基本的講：

移動(dòng)客戶端對(duì)meta的定義有幾項(xiàng)通用定義：

<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" />

第一個(gè)meta標(biāo)簽表示：

• 強(qiáng)制讓文檔與設(shè)備的寬度保持1：1；
• 文檔最大的寬度比列是1.0（initial-scale初始刻度值和maximum-scale最大刻度值）；
• user-scalable定義是否可縮放（0為不縮放），使頁面固定設(shè)備上面的大小。

（注意：實(shí)際測(cè)試中發(fā)現(xiàn)，HTC G7自身系統(tǒng)瀏覽器不支持這一條規(guī)則，能夠?qū)撁孢M(jìn)行放大，一旦放大響應(yīng)的box也隨之放大，導(dǎo)致俄頁面出現(xiàn)錯(cuò)亂問題，解決方法：定義頁面的最小寬度 min-width，body{min-width: 300px;}）

第二個(gè)meta標(biāo)簽表示：

• 使設(shè)備瀏覽網(wǎng)頁時(shí)對(duì)數(shù)字不啟用電話功能（不同設(shè)備解釋不同，itouch點(diǎn)擊數(shù)字為存入聯(lián)系人，iphone為撥打電話），忽略將頁面中的數(shù)字識(shí)別為電話號(hào)碼。

若需要啟用電話功能將telephone=yes即可，具體調(diào)用格式可以這樣書寫代碼<a href=”13888888888″>Call Me</a>，若在頁面上面有g(shù)oogle maps, iTunes和youtube的鏈接會(huì)在ios設(shè)備上打開相應(yīng)的程序組件。

IOS設(shè)備對(duì)meta定義的私有屬性：

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

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

這里要詳細(xì)的介紹一下ios設(shè)備對(duì)這兩個(gè)meta的功能作用（外界通稱該應(yīng)用為“離線app”，但從字面意思上面會(huì)有誤解，以為只能脫離網(wǎng)絡(luò)，所以在這里我還是用web app描述。）：

該meta可以看出內(nèi)容為“蘋果設(shè)備web 應(yīng)用程序xx”，就是說該meta是專門定義web 應(yīng)用的，但是什么是web app呢？

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

web app就是HTML5的應(yīng)用，例如可以開發(fā)一個(gè)html5的應(yīng)用程序（如：小蜜蜂、俄羅斯方塊、水電氣費(fèi)查詢等），基于html5的引用ios方面對(duì)這塊兒的支持在移動(dòng)設(shè)備上算是領(lǐng)先了。為什么繼續(xù)往下看：

圖片一：在網(wǎng)站中進(jìn)行保存

圖片二：保存至主屏幕

圖片三：填寫名稱

圖片四：主屏幕中樣式

圖片五：?jiǎn)?dòng)時(shí)的啟動(dòng)界面

圖片六：?jiǎn)?dòng)完成后的界面

圖片七：后臺(tái)運(yùn)行圖標(biāo)-獨(dú)立存在

圖片八：編輯圖標(biāo)

圖片九：刪除圖標(biāo)提示

從圖中可以看出該程序的運(yùn)行外觀上是脫離于瀏覽器的，實(shí)際上也是通過瀏覽器核心渲染出的，可以看作是一個(gè)app應(yīng)用程序在運(yùn)行，類似快捷方式。

web app 最大的好處有兩點(diǎn)：

• 不需要通過蘋果商店發(fā)布。
• 開發(fā)成本低，直接通過html5技術(shù)和蘋果提供的js函數(shù)，能夠做出滑動(dòng)等效果，效果上面能夠完全模擬應(yīng)用程序效果，非常適合企業(yè)做客戶端使用。

最明顯的缺點(diǎn)：

• 不支持推送（push）。

大家都知道 HTML5 帶來的革新，其中有一項(xiàng)功能就是對(duì)push的支持（現(xiàn)在PC上chrome支持push），雖然在蘋果上面目前還不能實(shí)現(xiàn)此功能，以后應(yīng)該會(huì)開發(fā)這塊兒功 能（感覺如果web app支持推送，那么對(duì)他自己本身app store業(yè)務(wù)應(yīng)該會(huì)有影響吧?。。。?。

還是來說下這兩個(gè)meta對(duì)web app的設(shè)定吧~

第一個(gè)meta：

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

說明：

• 網(wǎng)站開啟對(duì)web app程序的支持。

第二個(gè)meta：

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

說明：

• 在web app應(yīng)用下狀態(tài)條（屏幕頂部條）的顏色；
• 默認(rèn)值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）。

注意：

• 若值為“black-translucent”將會(huì)占據(jù)頁面px位置，浮在頁面上方（會(huì)覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕為40px）。
• 具體查看圖片十、圖片十一、圖片十二。

糾正：

• 之前查閱了一些資料，說apple-mobile-web-app-status-bar-style屬性為隱藏狀態(tài)欄，其實(shí)這是一個(gè)誤解，在這里為大家糾正一下這個(gè)問題。

圖示：

圖片十：black狀態(tài)

圖片十一：default狀態(tài)

圖片十二：black-translucent狀態(tài)

兩個(gè)meta的設(shè)置即可對(duì)web app程序進(jìn)行支持了。

蘋果web app其他設(shè)置：

當(dāng)然，配合web app的icon 和 啟動(dòng)界面需要額外的兩端代碼進(jìn)行設(shè)定，如下所示：

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

說明：

• 這個(gè)link就是設(shè)置web app的放置主屏幕上icon文件路徑（圖片四）。

使用：

• 該路徑需要注意的就是放到將網(wǎng)站的文檔根目錄下但不是服務(wù)器的文檔的根目錄。
• 圖片尺寸可以設(shè)定為57×57（px