CSS3 移動端meta元標籤

2021-09-27 06:37:05 字數 1583 閱讀 9829

分類:

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新加的乙個設定,對於...