移動平台對 meta 標籤的定義

2021-06-26 12:48:41 字數 2791 閱讀 5064

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

一、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

<metaname="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

<metaname="format-detection"content="telephone=no"/>

說明:

1

<metaname=content="yes"/>

說明:該 meta 可以看出內容為「蘋果裝置 web 應用程式 xx」,就是說該 meta 是專門定義 web 應用的。

1

<metaname=content="black"/>

說明:預設值為 default(白色),可以定為 black(黑色)和 black-translucent(灰色半透明);

注意:若值為「black-translucent」將會佔據頁面位置,浮在頁面上方(會覆蓋頁面 20px 高度 iphone4 和 itouch4 的 retina 螢幕為 40px )。

6、name 屬性設定作者姓名及****1

<metaname="author"contect="liudanyun, [email protected]"/>

1<linkrel=href="iphone_logo.png"/>

使用: 1

<linkrel=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 值 顯示字符集的設定 說明 設定頁面使用的字符集,用以說明主頁製作所使用的文字語言,瀏覽器會根據此來呼叫相應的字符集顯示 page 內容。用法...