下面介紹一些有關(guān)標記的例子及解釋。
一、meta 標簽分兩大部分：HTTP 標題信息（http-equiv）和頁面描述信息（name）。
1、http-equiv 屬性的 Content-Type 值（顯示字符集的設(shè)定）
說明：設(shè)定頁面使用的字符集，用以說明主頁制作所使用的文字語言，瀏覽器會根據(jù)此來調(diào)用相應(yīng)的字符集顯示 page 內(nèi)容。
用法：
1 <</code>meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
注意：該 meta 標簽定義了 HTML 頁面所使用的字符集為 utf-8 ，就是萬國碼。它可以在同一頁面顯示中文簡體、繁體及其它語言（如日文，韓文）等。
2、name 屬性的 viewport 值（移動屏幕的縮放）
也就是可視區(qū)域。對于桌面瀏覽器，我們都很清楚 viewport 是什么，就是除去了所有工具欄、狀態(tài)欄、滾動條等等之后用于看網(wǎng)頁的區(qū)域，這是真正有效的區(qū)域。由于移動設(shè)備屏幕寬度不同于傳統(tǒng) web，因此我們需要改變 viewport 值。
實際上我們可以操作的屬性有 4 個：
 width - // viewport 的寬度 （范圍從 200 到 10,000，默認為 980 像素） height - // viewport 的高度 （范圍從 223 到 10,000 ） initial-scale - // 初始的縮放比例 （范圍從 > 0 到 10） minimum-scale - // 允許用戶縮放到的最小比例 maximum-scale - // 允許用戶縮放到的最大比例 user-scalable - // 用戶是否可以手動縮放 (no，yes)
1 <</code>meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
說明：
強制讓文檔與設(shè)備的寬度保持 1:1 ；
文檔最大的寬度比列是1.0（ initial-scale 初始刻度值和 maximum-scale 最大刻度值）；
user-scalable 定義用戶是否可以手動縮放（ no 為不縮放），使頁面固定設(shè)備上面的大?。?br /> 注意：實際測試中發(fā)現(xiàn)，有些安卓系統(tǒng)自帶的瀏覽器并不支持這一條規(guī)則，能夠?qū)撁孢M行放大，一旦放大響應(yīng)的 box 也隨之放大，導(dǎo)致頁面出現(xiàn)錯亂問題，解決方法：定義頁面的最小寬度
1 body { min-width: 320px; }
3、name 屬性的 format-detection 值（忽略頁面中的數(shù)字識別為電話號碼）
1 <</code>meta name="format-detection" content="telephone=no" />
說明：
使設(shè)備瀏覽網(wǎng)頁時對數(shù)字不啟用電話功能（不同設(shè)備解釋不同，iTouch 點擊數(shù)字為存入聯(lián)系人，iPhone 為撥打電話），忽略將頁面中的數(shù)字識別為電話號碼。
若需要啟用電話功能將 telephone=yes 即可，若在頁面上面有 Google Maps, iTunes 和 YouTube 的鏈接會在ios設(shè)備上打開相應(yīng)的程序組件。
4、name 屬性的 apple-mobile-web-app-capable 值（網(wǎng)站開啟對 web app 程序的支持）
1 <</code>meta name="apple-mobile-web-app-capable" content="yes" />
說明：
網(wǎng)站開啟對 web app 程序的支持。
該 meta 可以看出內(nèi)容為“蘋果設(shè)備 web 應(yīng)用程序 xx”，就是說該 meta 是專門定義 web 應(yīng)用的。
5、name 屬性的 apple-mobile-web-app-status-bar-style 值（改變頂部狀態(tài)條的顏色）
1 <</code>meta name="apple-mobile-web-app-status-bar-style" content="black" />
說明：
在 web app 應(yīng)用下狀態(tài)條（屏幕頂部條）的顏色；
默認值為 default（白色），可以定為 black（黑色）和 black-translucent（灰色半透明）；
注意：若值為“black-translucent”將會占據(jù)頁面位置，浮在頁面上方（會覆蓋頁面 20px 高度 iphone4 和 itouch4 的 Retina 屏幕為 40px ）。
6、name 屬性設(shè)置作者姓名及聯(lián)系方式
1 <</code>meta name="author" contect="liudanyun, [email protected]" />

二、蘋果 Web App 其他設(shè)置：
當然，配合 Web App 的 icon 和啟動界面需要額外的兩端代碼進行設(shè)定，如下所示：
1 <</code>link rel="apple-touch-icon-precomposed" href="iphone_logo.png" />
說明：這個 link 就是設(shè)置 Web App 的放置主屏幕上 icon 文件路徑（圖片四）。
使用：
該路徑需要注意的就是放到將網(wǎng)站的文檔根目錄下但不是服務(wù)器的文檔的根目錄。
圖片尺寸可以設(shè)定為 57×57（px）或者 Retina 可以定為 114×114（px），iPad 尺寸為 72×72（px）
1 <</code>link rel="apple-touch-startup-image" href="logo_startup.png" />
說明：這個 link 就是設(shè)置啟動時候的界面。
使用：
放置的路徑和上面一樣。
官方規(guī)定啟動界面的尺寸必須為 320×640（px），原本以為 Retina 屏幕可以支持雙倍，但是不支持，圖片顯示不出來。
如果對 Web App 的這兩個 meta 還有不能詳細理解的可以查看官方解釋：
http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html
關(guān)于 link 方面還有更多的參數(shù)設(shè)置（例如：iPod、iPad、iPhone 不同尺寸不同圖標），可以查看官方標準文檔：

http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebConten