一、meta 標籤分兩大部分:http 標題資訊(http-equiv)和頁面描述資訊(name)。
1、http-equiv 屬性的 content-type 值(顯示字符集的設定)
說明:設定頁面使用的字符集,用以說明主頁製作所使用的文字語言,瀏覽器會根據此來呼叫相應的字符集顯示 page 內容。
用法:1
注意:該 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"
/>
說明:注意:實際測試中發現,有些安卓系統自帶的瀏覽器並不支援這一條規則,能夠對頁面進行放大,一旦放大響應的 box 也隨之放大,導致頁面出現錯亂問題,解決方法:定義頁面的最小寬度
1
2
3
body
3、name 屬性的 format-detection 值(忽略頁面中的數字識別為**號碼) 1
<
meta
name
=
"format-detection"
content
=
"telephone=no"
/>
說明:
1
<
meta
name
=
content
=
"yes"
/>
說明:該 meta 可以看出內容為「蘋果裝置 web 應用程式 xx」,就是說該 meta 是專門定義 web 應用的。
1
<
meta
name
=
content
=
"black"
/>
說明:預設值為 default(白色),可以定為 black(黑色)和 black-translucent(灰色半透明);
注意:若值為「black-translucent」將會佔據頁面位置,浮在頁面上方(會覆蓋頁面 20px 高度 iphone4 和 itouch4 的 retina 螢幕為 40px )。
6、name 屬性設定作者姓名及**** 1
<
meta
name
=
"author"
contect
=
"liudanyun, [email protected]"
/>
1<
link
rel
=
href
=
"iphone_logo.png"
/>
使用: 1
<
link
rel
=
href
=
"logo_startup.png"
/>
說明:這個 link 就是設定啟動時候的介面。
使用:
移動平台對 meta 標籤的定義
下面介紹一些有關標記的例子及解釋。一 meta 標籤分兩大部分 http 標題資訊 http equiv 和頁面描述資訊 name 1 http equiv 屬性的 content type 值 顯示字符集的設定 說明 設定頁面使用的字符集,用以說明主頁製作所使用的文字語言,瀏覽器會根據此來呼叫相應...
移動平台對 meta 標籤的定義
下面介紹一些有關標記的例子及解釋。一 meta 標籤分兩大部分 http 標題資訊 http equiv 和頁面描述資訊 name 1 http equiv 屬性的 content type 值 顯示字符集的設定 說明 設定頁面使用的字符集,用以說明主頁製作所使用的文字語言,瀏覽器會根據此來呼叫相應...
移動平台對 META 標籤的定義
下面介紹一些有關標記的例子及解釋。一 meta 標籤分兩大部分 http 標題資訊 http equiv 和頁面描述資訊 name 1 http equiv 屬性的 content type 值 顯示字符集的設定 說明 設定頁面使用的字符集,用以說明主頁製作所使用的文字語言,瀏覽器會根據此來呼叫相應...