CSS3 移動端meta元標籤

2021-09-27 07:10:11 字數 1533 閱讀 2018

【內容】

meta 標籤分兩大部分:http 標題資訊(http-equiv)和頁面描述資訊(name)

http 標題資訊(http-equiv)屬性的content-type 值(顯示字符集的設定)

說明:設定頁面使用的字符集,用以說明主頁製作所使用的文字語言,瀏覽器會根據此來呼叫相應的字符集顯示 page 內容。語法如下:

該 meta 標籤定義了 html 頁面所使用的字符集為 utf-8 ,就是萬國碼。它可以在同一頁面顯示中文簡體、繁體及其它語言(如日文,韓文)等。

他的設定編碼格式語法:

【注意】

上面是html5的宣告語法,傳統宣告語法為

meta標籤的作用:

(1)提供有關頁面的元資訊,標籤位於文件的頭部,不包含任何內容。

(2)name 屬性為viewport 時,主要控制移動螢幕的縮放

viewport為可視區域:viewport 是什麼,就是除去了所有工具欄、狀態列、滾動條等等 之後用於看網頁的區域,這是真正有效的區域。

由於移動裝置螢幕寬度不同於傳統 web,因此我們需要改變 viewport 值。

name 屬性為viewport 可視區域時取值

(3)設定頁面關鍵字

(4)設定**頁面說明,用於搜尋引擎推廣

(5)新增**作者資訊

(6)可以操作的屬性有 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 為不縮放),使頁面固定裝置上面的大小;

CSS3 移動端meta元標籤

分類 meta 標籤分兩大部分 http 標題資訊 http equiv 和頁面描述資訊 name 1 http equiv 屬性的 content type 值 顯示字符集的設定 語法如下 該 meta 標籤定義了 html 頁面所使用的字符集為 utf 8 就是萬國碼。設定編碼格式語法 以上為h...

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