前端meta整理

2022-05-22 13:33:06 字數 2403 閱讀 1038

必要屬性屬性值

描述content

some text

定義與http-equiv或name屬性相關的元資訊

可選屬性屬性值

描述http-equiv

content-type / expire / refresh / set-cookie

把content屬性關聯到http頭部。

name

author / description / keywords / generator / revised / others

把 content 屬性關聯到乙個名稱。

content

some text

定義用於翻譯 content 屬性值的格式。

2、頁面描述,每個網頁都應有乙個不超過 150 個字元且能準確反映網頁內容的描述標籤。

3、搜尋引擎索引方式

4、頁面重定向和重新整理:content內的數字代表時間(秒),既多少時間後重新整理。如果加url,則會重定向到指定網頁(搜尋引擎能夠自動檢測,也很容易被引擎視作誤導而受到懲罰)

5、其它

設計塢官網

1、viewport:能優化移動瀏覽器的顯示。如果不是響應式**,不要使用initial-scale或者禁用縮放。大部分4.7-5寸裝置的viewport寬設為360px;5.5寸裝置設為400px;iphone6設為375px;ipone6 plus設為414px。

width:寬度(數值 / device-width)(範圍從200 到10,000,預設為980 畫素)

height:高度(數值 / device-height)(範圍從223 到10,000)

initial-scale:初始的縮放比例 (範圍從》0 到10)

minimum-scale:允許使用者縮放到的最小比例

maximum-scale:允許使用者縮放到的最大比例

user-scalable:使用者是否可以手動縮 (no,yes)

minimal-ui:可以在頁面載入時最小化上下狀態列。(已棄用)

注意,很多人使用initial-scale=1到非響應式**上,這會讓**以100%寬度渲染,使用者需要手動移動頁面或者縮放。如果和initial-scale=1同時使用user-scalable=no或maximum-scale=1,則使用者將不能放大/縮小網頁來看到全部的內容。

4、新增到主屏後的標題

5、忽略數字自動識別為**號碼

6、忽略識別郵箱

8、其他

1、申明編碼

2、優先使用 ie 最新版本和 chrome

3、瀏覽器核心控制:國內瀏覽器很多都是雙核心(webkit和trident),webkit核心高速瀏覽,ie核心相容網頁和舊版**。而新增meta標籤的**可以控制瀏覽器選擇何種核心渲染。參考文件

國內雙核瀏覽器預設核心模式如下:

1. 搜狗高速瀏覽器、qq瀏覽器:ie核心(相容模式)

2. 360極速瀏覽器、遨遊瀏覽器:webkit核心(極速模式)

4、禁止瀏覽器從本地計算機的快取中訪問頁面內容:這樣設定,訪問者將無法離線瀏覽。

5、windows 86、站點適配:主要用於pc-手機頁的對應關係。

常用meta整理

必要屬性屬性 值描述content some text 定義與http equiv或name屬性相關的元資訊 可選屬性屬性 值描述http equiv content type expire refresh set cookie 把content屬性關聯到http頭部。name author des...

常用meta整理

必要屬性 屬性值 描述content some text 定義與http equiv或name屬性相關的元資訊 可選屬性 屬性 值描述http equiv content type expire refresh set cookie 把content屬性關聯到http頭部。name author d...

常用meta整理

必要屬性 屬性 值描述content some text 定義與http equiv或name屬性相關的元資訊 可選屬性 屬性 值描述http equiv content type expire refresh set cookie 把content屬性關聯到http頭部。name author d...