下面介紹一些有關(guān)標記的例子及解釋。

一、meta 標簽分兩大部分：HTTP 標題信息（http-equiv）和頁(yè)面描述信息（name）。

1、http-equiv 屬性的 Content-Type 值（顯示字符集的設定）

說(shuō)明：設定頁(yè)面使用的字符集，用以說(shuō)明主頁(yè)制作所使用的文字語(yǔ)言，瀏覽器會(huì )根據此來(lái)調用相應的字符集顯示 page 內容。

用法：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

注意：該 meta 標簽定義了 HTML 頁(yè)面所使用的字符集為 utf-8 ，就是萬(wàn)國碼。它可以在同一頁(yè)面顯示中文簡(jiǎn)體、繁體及其它語(yǔ)言（如日文，韓文）等。

2、name 屬性的 viewport 值（移動(dòng)屏幕的縮放）

也就是可視區域。對于桌面瀏覽器，我們都很清楚 viewport 是什么，就是除去了所有工具欄、狀態(tài)欄、滾動(dòng)條等等之后用于看網(wǎng)頁(yè)的區域，這是真正有效的區域。由于移動(dòng)設備屏幕寬度不同于傳統 web，因此我們需要改變 viewport 值。西安制作網(wǎng)站電話(huà),西安建站公司推薦閱讀>>> 《百度搜索Mobile Friendly（移動(dòng)友好度）標準V1.0》,

實(shí)際上我們可以操作的屬性有 4 個(gè)：

width – // viewport 的寬度 （范圍從 200 到 10,000，默認為 980 像素）

height – // viewport 的高度 （范圍從 223 到 10,000 ）

initial-scale – // 初始的縮放比例 （范圍從 > 0 到 10）

minimum-scale – // 允許用戶(hù)縮放到的最小比例

maximum-scale – // 允許用戶(hù)縮放到的最大比例

user-scalable – // 用戶(hù)是否可以手動(dòng)縮放 (no，yes)

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

說(shuō)明：

強制讓文檔與設備的寬度保持 1:1 ；

文檔最大的寬度比列是1.0（ initial-scale 初始刻度值和 maximum-scale 最大刻度值）；

user-scalable 定義用戶(hù)是否可以手動(dòng)縮放（ no 為不縮放），使頁(yè)面固定設備上面的大??；

注意：實(shí)際測試中發(fā)現，有些安卓系統自帶的瀏覽器并不支持這一條規則，能夠對頁(yè)面進(jìn)行放大，一旦放大響應的 box 也隨之放大，導致頁(yè)面出現錯亂問(wèn)題，解決方法：定義頁(yè)面的最小寬度

body {

    min-width: 320px;

}

3、name 屬性的 format-detection 值（忽略頁(yè)面中的數字識別為電話(huà)號碼）

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

說(shuō)明：

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

若需要啟用電話(huà)功能將 telephone=yes 即可，若在頁(yè)面上面有 Google Maps, iTunes 和 YouTube 的鏈接會(huì )在ios設備上打開(kāi)相應的程序組件。

4、name 屬性的 apple-mobile-web-app-capable 值（網(wǎng)站開(kāi)啟對 web app 程序的支持）

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

說(shuō)明：

網(wǎng)站開(kāi)啟對 web app 程序的支持。

該 meta 可以看出內容為“蘋(píng)果設備 web 應用程序 xx”，就是說(shuō)該 meta 是專(zhuān)門(mén)定義 web 應用西安哪家公司做網(wǎng)站便宜又好呢,網(wǎng)站制作公司推薦閱讀>>> 移動(dòng)時(shí)代下的站長(cháng)都該做哪些工作,

5、name 屬性的 apple-mobile-web-app-status-bar-style 值（改變頂部狀態(tài)條的顏色）

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

說(shuō)明：

在 web app 應用下?tīng)顟B(tài)條（屏幕頂部條）的顏色；

默認值為 default（白色），可以定為 black（黑色）和 black-translucent（灰色半透明）；

注意：若值為“black-translucent”將會(huì )占據頁(yè)面位置，浮在頁(yè)面上方（會(huì )覆蓋頁(yè)面 20px 高度 iphone4 和 itouch4 的 Retina 屏幕為 40px ）。

6、name 屬性設置作者姓名及聯(lián)系方式

<meta name="author" contect="liudanyun, liudy102@163.com" />

二、蘋(píng)果 Web App 其他設置：

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

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

說(shuō)明：這個(gè) link 就是設置 Web App 的放置主屏幕上 icon 文件路徑（圖片四）。

使用：

該路徑需要注意的就是放到將網(wǎng)站的文檔根目錄下但不是服務(wù)器的文檔的根目錄。

圖片尺寸可以設定為 57*57（px）或者 Retina 可以定為 114*114（px），iPad 尺寸為 72*72（px）

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

說(shuō)明：這個(gè) link 就是設置啟動(dòng)時(shí)候的界面。

使用：

放置的路徑和上面一樣。

官方規定啟動(dòng)界面的尺寸必須為 320*640（px），原本以為 Retina 屏幕可以支持雙倍，但是不支持，圖片顯示不出來(lái)。西安網(wǎng)站制作推廣,公司網(wǎng)頁(yè)設計推薦閱讀>>> 禁止網(wǎng)站被百度轉碼的方法,

如果對 Web App 的這兩個(gè) meta 還有不能詳細理解的可以查看官方解釋?zhuān)篗eta Tags

關(guān)于 link 方面還有更多的參數設置（例如：iPod、iPad、iPhone 不同尺寸不同圖標），可以查看官方標準文檔：Configuring Web Applications