移動前端不得不瞭解的HTML5 head 頭標籤（中上篇）
Meta 標籤
meta標籤是HTML中head頭部的一個輔助性標籤，它位於HTML文檔頭部的 <head> 和 <title> 標記之間，它提供用戶不可見的信息。雖然這部分信息用戶不可見，可是其做用很是強大，特別是當今的前端開發工做中，設置合適的meta標籤能夠大大提高網站頁面的可用性。html
桌面端開發中，meta標籤一般用來爲搜索引擎優化（SEO）及 robots定義頁面主題，或者是定義用戶瀏覽器上的cookie；它能夠用於鑑別做者，設定頁面格式，標註內容提要和關鍵字；還能夠設置頁面使其能夠根據你定義的時間間隔刷新本身，以及設置RASC內容等級，等等。前端
移動端開發中，meta標籤除了桌面端中的功能設置外，還包括，好比viewport設置，添加到主屏幕圖標，標籤頁顏色等等實用設置。具體能夠看後面詳細的介紹。ios
meta標籤分類
meta標籤根據屬性的不一樣，可分爲兩大部分：http-equiv 和 name 屬性。git
http-equiv：至關於http的文件頭做用，它能夠向瀏覽器傳回一些有用的信息，以幫助瀏覽器正確地顯示網頁內容。
name屬性：主要用於描述網頁，與之對應的屬性值爲content，content中的內容主要是便於瀏覽器，搜索引擎等機器人識別，等等。web
推薦使用的meta標籤
<!-- 設置文檔的字符編碼 -->
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 以上 3 個 meta 標籤 *必須* 放在 head 的最前面；其餘任何的 head 內容必須在這些標籤的 *後面* -->
<!-- 容許控制資源的過分加載 -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- 儘早地放置在文檔中 -->
<!-- 僅應用於該標籤下的內容 -->
<!-- Web 應用的名稱（僅當網站被用做爲一個應用時才使用）-->
<meta name="application-name" content="應用名稱">
<!-- 針對頁面的簡短描述（限制 150 字符）-->
<!-- 在*某些*狀況下，該描述是被用做搜索結果展現片斷的一部分 -->
<meta name="description" content="一個頁面描述">
<!-- 控制搜索引擎的抓取和索引行爲 -->
<meta name="robots" content="index,follow,noodp"><!-- 全部的搜索引擎 -->
<meta name="googlebot" content="index,follow"><!-- 僅對 Google 有效 -->
<!-- 告訴 Google 不顯示網站連接的搜索框 -->
<meta name="google" content="nositelinkssearchbox">
<!-- 告訴 Google 不提供此頁面的翻譯 -->
<meta name="google" content="notranslate">
<!-- 驗證 Google 搜索控制檯的全部權 -->
<meta name="google-site-verification" content="verification_token">
<!-- 用來命名軟件或用於構建網頁（如 - WordPress、Dreamweaver）-->
<meta name="generator" content="program">
<!-- 關於你的網站主題的簡短描述 -->
<meta name="subject" content="你的網站主題">
<!-- 很是簡短（少於 10 個字）的描述。主要用於學術論文。-->
<meta name="abstract" content="">
<!-- 完整的域名或網址 -->
<meta name="url" content="https://example.com/">
<meta name="directory" content="submission">
<!-- 基於網站內容給出通常的年齡分級 -->
<meta name="rating" content="General">
<!-- 容許控制 referrer 信息如何傳遞 -->
<meta name="referrer" content="never">
<!-- 禁用自動檢測和格式化可能的電話號碼 -->
<meta name="format-detection" content="telephone=no">
<!-- 經過設置爲 「off」 徹底退出 DNS 預取 -->
<meta http-equiv="x-dns-prefetch-control" content="off">
<!-- 在客戶端存儲 cookie，web 瀏覽器的客戶端識別 -->
<meta http-equiv="set-cookie" content="name=value; expires=date; path=url">
<!-- 指定要顯示在一個特定框架中的頁面 -->
<meta http-equiv="Window-Target" content="_value">
<!-- 地理標籤 -->
<meta name="ICBM" content="latitude, longitude">
<meta name="geo.position" content="latitude;longitude">
<!-- 國家代碼 (ISO 3166-1): 強制性, 州代碼 (ISO 3166-2): 可選; 如 content="US" / content="US-NY" -->
<meta name="geo.region" content="country[-state]">
<!-- 如 content="New York City" -->
<meta name="geo.placename" content="city/town">瀏覽器
爲移動設備添加 viewport
viewport 可讓佈局在移動瀏覽器上顯示的更好。 一般會寫緩存
<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<!-- `width=device-width` 會致使 iPhone 5 添加到主屏後以 WebApp 全屏模式打開頁面時出現黑邊 http://bigc.at/ios-webapp-viewport-meta.orz -->服務器
content 參數：cookie
- width viewport 寬度(數值/device-width)
- height viewport 高度(數值/device-height)
- initial-scale 初始縮放比例
- maximum-scale 最大縮放比例
- minimum-scale 最小縮放比例
- user-scalable 是否容許用戶縮放(yes/no)
- minimal-ui iOS 7.1 beta 2 中新增屬性（注意：iOS8 中已經刪除），能夠在頁面加載時最小化上下狀態欄。這是一個布爾值，能夠直接這樣寫：
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">app
而若是你的網站不是響應式的，請不要使用 initial-scale 或者禁用縮放。
html 代碼:
<meta name="viewport" content="width=device-width,user-scalable=yes">
相關連接：非響應式設計的viewport
適配 iPhone 6 和 iPhone 6plus 則須要寫：
html 代碼:
<meta name="viewport" content="width=375">
<meta name="viewport" content="width=414">
大部分 4.7~5 寸的安卓設備的 viewport 寬設爲 360px，iPhone 6 上倒是 375px，大部分 5.5 寸安卓機器（好比說三星 Note）的 viewport 寬爲 400，iPhone 6 plus 上是 414px。
不推薦的 meta 屬性
<!-- 用於聲明文檔語言，但支持得不是很好。最好使用 <html lang=""> -->
<meta name="language" content="en">
<!-- Google 無視 & Bing 認爲垃圾的指示器 -->
<meta name="keywords" content="你,關鍵字,在這裏,不使用空格,而用逗號進行分隔">
<!-- 目前沒有在任何搜索引擎中使用過的聲明 -->
<meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm">
<!-- 爲垃圾郵件機器人收穫 email 地址提供了一種簡單的方式 -->
<meta name="reply-to" content="email@example.com">
<!-- 最好使用 <link rel="author"> 或 humans.txt 文件 -->
<meta name="author" content="name, email@example.com">
<meta name="designer" content="">
<meta name="owner" content="">
<!-- 告訴搜索機器人一段時間後從新訪問該網頁。這不支持，由於大多數搜索引擎使用隨機時間間隔來從新抓取網頁 -->
<meta name="revisit-after" content="7 days">
<!-- 在一段時間後將用戶重定向到新的 URL -->
<!-- W3C 建議不要使用該標籤。Google 建議使用服務器端的 301 重定向。-->
<meta http-equiv="refresh" content="300; url=https://example.com/">
<!-- 描述網站的主題 -->
<meta name="topic" content="">
<!-- 公司概要或網站目的 -->
<meta name="summary" content="">
<!-- 一個已廢棄的標籤，和關鍵詞 meta 標籤的做用相同 -->
<meta name="classification" content="business">
<!-- 是不是相同的 URL，年代久遠且不支持 -->
<meta name="identifier-URL" content="https://example.com/">
<!-- 和關鍵詞標籤相似的功能 -->
<meta name="category" content="">
<!-- 確保你的網站在全部國家和語言中都能顯示 -->
<meta name="coverage" content="Worldwide">
<!-- 和 coverage 標籤相同 -->
<meta name="distribution" content="Global">
<!-- 控制在互聯網上哪些用戶能夠訪問 -->
<meta http-equiv="Pics-label" content="value">
<!-- 緩存控制 -->
<!-- 最好在服務器端配置緩存控制 -->
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
- 1. 移動端頭部標籤(HTML5 Head Meta)
- 2. 移動端頭部標籤(HTML5 head meta)
- 3. 移動前端頭部標籤(HTML5 head meta)
- 4. html5 head 標籤
- 5. 移動前端頭部標籤(HTML5 head meta)轉載 移動設備對meta的定義
- 6. 移動端的頭部標籤和meta
- 更多相關文章...
- • Git 標籤 - Git 教程
- • C# 不安全代碼 - C#教程
- • SpringBoot中properties文件不能自動提示解決方法
- • IntelliJ IDEA中SpringBoot properties文件不能自動提示問題解決
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CVPR 2020 論文大盤點-光流篇
- 2. Photoshop教程_ps中怎麼載入圖案？PS圖案如何導入？
- 3. org.pentaho.di.core.exception.KettleDatabaseException:Error occurred while trying to connect to the
- 4. SonarQube Scanner execution execution Error --- Failed to upload report - 500: An error has occurred
- 5. idea 導入源碼包
- 6. python學習 day2——基礎學習
- 7. 3D將是頁遊市場新賽道？
- 8. osg--交互
- 9. OSG-交互
- 10. Idea、spring boot 圖片(pgn顯示、jpg不顯示)解決方案