前端基礎解析HTML頁面-meta標籤
meta標籤:
標籤位於文件的頭部,且永遠位於 head 元素內部,
元素可提供有關頁面的元資訊,
其屬性定義了與文件相關聯的名稱/值對。
元資料總是以名稱/值的形式被成對傳遞的。
把 content 屬性關聯到一個名稱。
meta name="title" content="頁面的標題 "/
meta name="keywords" content="頁面的關鍵詞 "/
meta name="description" content="描述的資訊和內容 "/
author 作者
description 描述
keywords 關鍵詞
generator 生成器 如“sublime、webstorm”
revised 修訂版
others 其他
把 content 屬性關聯到 HTTP 頭部。
meta http-equiv="Cache-Control" content="no-siteapp"
content-type
expires
refresh
set-cookie
定義用於翻譯 content 屬性值的格式。
scheme 屬性用於指定要用來翻譯屬性值的方案。
meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
viewport指 web 頁面上使用者的可見區域。
移動裝置上預設的 viewport 大小都是 980px 。
width=device-width 是指這個裝置最理想的 viewport 寬度,可以自適應裝置寬度。
initial-scale=1.0 是指初始化的時候縮放大小是1,也就是不縮放。
user-scalable=0 是指禁止使用者進行縮放。
maximum-scale=1.0 是指使用者最大縮放大小是1
既可以設定width=device-width,也可以設定initial-scale=1,但有一個小缺陷,就是width=device-width會導致iphone、ipad橫豎屏不分,initial-scale=1會導致IE橫豎屏不分,都以豎屏的ideal viewport寬度為準。所以,最完美的寫法兩者都寫上去, initial-scale=1 解決 iphone、ipad的缺陷,width=device-width解決IE的缺陷。
關於meta name="applicable-device"content="pc"
百度可以通過基本html特徵來判斷是否適合無線端瀏覽:
PC站:meta name="applicable-device" content="pc"手機站:meta name="applicable-device" content="mobile"/響應式網頁可標識:meta name="applicable-device"content="pc,mobile"