轉:移動平台對 meta 標籤的定義

標籤：

下面介紹一些有關標記的例子及解釋。

一、meta 標籤分兩大部分：HTTP 標題資訊（http-equiv）和頁面描述資訊（name）。

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

說明：設定頁面使用的字元集，用以說明首頁製作所使用的文字語言，瀏覽器會根據此來調用相應的字元集顯示 page 內容。

用法：

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

注意：該 meta 標籤定義了 HTML 頁面所使用的字元集為 utf-8 ，就是萬國碼。它可以在同一頁面顯示中文簡體、繁體及其它語言（如日文，韓文）等。

2、name 屬性的 viewport 值（移動螢幕的縮放）

也就是可視地區。對於案頭瀏覽器，我們都很清楚 viewport 是什麼，就是除去了所有工具列、狀態列、捲軸等等之後用於看網頁的地區，這是真正有效地區。由於行動裝置螢幕寬度不同於傳統 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	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

說明：

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

注意：實際測試中發現，有些安卓系統內建的瀏覽器並不支援這一條規則，能夠對頁面進行放大，一旦放大響應的 box 也隨之放大，導致頁面出現錯亂問題，解決方案：定義頁面的最小寬度

123	body {    min-width: 320px;}

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

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

說明：

• 使裝置瀏覽網頁時對數字不啟用電話功能（不同裝置解釋不同，iTouch 點擊數字為存入連絡人，iPhone 為撥打到電話），忽略將頁面中的數字識別為電話號碼。
• 若需要啟用電話功能將 telephone=yes 即可，若在頁面上面有 Google Maps, iTunes 和 YouTube 的連結會在ios裝置上開啟相應的程式組件。

4、name 屬性的 apple-mobile-web-app-capable 值（網站開啟對 web app 程式的支援）

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

說明：

• 網站開啟對 web app 程式的支援。
• 該 meta 可以看出內容為“蘋果裝置 web 應用程式 xx”，就是說該 meta 是專門定義 web 應用的。

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

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

說明：

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

注意：若值為“black-translucent”將會佔據頁面位置，浮在頁面上方（會覆蓋頁面 20px 高度 iphone4 和 itouch4 的 Retina 螢幕為 40px ）。

6、name 屬性設定作者姓名及連絡方式

1	<meta name="author" contect="liudanyun, [email protected]" />

二、蘋果 Web App 其他設定：

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

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

說明：這個 link 就是設定 Web App 的放置主畫面上 icon 檔案路徑（圖片四）。

使用：

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

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

說明：這個 link 就是設定啟動時候的介面。

使用：

• 放置的路徑和上面一樣。
• 官方規定啟動介面的尺寸必須為 320*640（px），原本以為 Retina 螢幕可以支援雙倍，但是不支援，圖片顯示不出來。

如果對 Web App 的這兩個 meta 還有不能詳細理解的可以查看官方解釋：Meta Tags

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

轉:移動平台對 meta 標籤的定義