分類:
meta 標籤分兩大部分:http 標題資訊(http-equiv)和頁面描述資訊(name)
(1)http-equiv 屬性的 content-type 值(顯示字符集的設定)
語法如下:
該 meta 標籤定義了 html 頁面所使用的字符集為 utf-8 ,就是萬國碼。
設定編碼格式語法:
以上為html5的宣告語法,傳統宣告語法為
標籤的作用:提供有關頁面的元資訊,標籤位於文件的頭部,不包含任何內容。
主要有以下幾個作用:標籤的作用:
(1)設定頁面關鍵字
(2)設定**頁面說明,用於搜尋引擎推廣
(3)新增**作者資訊
標籤的作用:name 屬性為viewport 時,主要控制移動螢幕的縮放
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:1 ;
文件最大的寬度比列是1.0( initial-scale 初始刻度值和 maximum-scale 最大刻度值);
user-scalable 定義使用者是否可以手動縮放( no 為不縮放),使頁面固定裝置上面的大小;
注意:
實際測試中發現,有些安卓系統自帶的瀏覽器並不支援這一條規則,能夠對頁面進行放大,一旦放大響應的 box 也隨之放大,導致頁面出現錯亂問題,解決方法:定義頁面的最小寬度
方案:
CSS3 移動端meta元標籤
內容 meta 標籤分兩大部分 http 標題資訊 http equiv 和頁面描述資訊 name http 標題資訊 http equiv 屬性的content type 值 顯示字符集的設定 說明 設定頁面使用的字符集,用以說明主頁製作所使用的文字語言,瀏覽器會根據此來呼叫相應的字符集顯示 pa...
meta標籤 移動端
手機網頁可以通過meta標籤設定縮放,撥號的超連結 縮放 網頁手機wap2.0網頁的head裡加入下面這條元標籤,在iphone的瀏覽器中頁面將以原始大小顯示,並不允許縮放。width viewport的寬度 height viewport的高度 initial scale 初始的縮放比例 mini...
移動端meta標籤
設定這些meta標籤的主要作用是描述網頁,便於搜尋引擎抓取 相容瀏覽器,適配移動端 開啟或者是禁止一些預設的樣式和預設的事件等等。1 作用 ie edge告訴ie使用最新的引擎渲染網頁,chrome 1則可以啟用chrome frame x ua compatible是自從ie8新加的乙個設定,對於...