移動前端 HTML5 head

時間  2019-12-08
標籤 移動 前端 html5 html head 欄目 無線 简体版
原文   原文鏈接

移動前端不得不瞭解的HTML5 head 頭標籤（2016最新版）

發表於 2016年10月20日 by 愚人碼頭 被瀏覽 875 次

小編推薦：掘金是一個高質量的技術社區，從 ECMAScript 6 到 Vue.js，性能優化到開源類庫，讓你不錯過前端開發的每個技術乾貨。各大應用市場搜索「掘金」便可下載APP，技術乾貨盡在掌握..php

html5-head

HTML的頭部內容特別多，有針對SEO的頭部信息，也有針對移動設備的頭部信息。並且各個瀏覽器內核以及各個國內瀏覽器廠商都有些本身的標籤元素,有不少差別性。移動端的工做已經愈來愈成爲前端工做的重要內容，除了日常的項目開發，HTML 頭部標籤功能，特別是meta，link等標籤的功能屬性顯得很是重要。這裏整理了一份 <head> 部分的清單，讓你們瞭解每一個標籤及相應屬性的意義，寫出知足本身需求的 <head> 頭部標籤，能夠頗有效的加強頁面的可用性。css

注：去年整理過移動前端不得不瞭解的html5 head 頭標籤，隨着時間和瀏覽器廠商的升級，如今看起來彷佛有些過期了。因此從新整理了一下。增長了新的內容，及過期的一些提示，同時增長了部分桌面端瀏覽器的一些說明。html

HTML基本的頭部標籤

下面是HTML基本的頭部元素:前端

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="x-ua-compatible" content="ie=edge">
  6. <!--移動端的頁面這個能夠忽略，具體能夠查看本文Internet Explorer瀏覽器部分-->
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <!--具體能夠查看本文 爲移動設備添加 viewport 部分-->
  9. <!-- 以上 3 個 meta 標籤 *必須* 放在 head 的最前面；其餘任何的 head 內容必須在這些標籤的 *後面* -->
  10. <title>頁面標題</title>
  11. ...
  12. </head>

其中vue

  1. <meta http-equiv="x-ua-compatible" content="ie=edge">

在桌面開發的時候可讓IE瀏覽器以最新的模式渲染頁面，具體能夠查看本文Internet Explorer瀏覽器部分。
若是你的頁面肯定只在桌面瀏覽器中運行，那麼html5

  1. <meta name="viewport" content="width=device-width, initial-scale=1">

也能夠省略。android

DOCTYPE

DOCTYPE(Document Type)，該聲明位於文檔中最前面的位置，處於 html 標籤以前，此標籤告知瀏覽器文檔使用哪一種 HTML 或者 XHTML 規範。ios

使用 HTML5 doctype，不區分大小寫。git

  1. <!DOCTYPE html> <!-- 使用 HTML5 doctype，不區分大小寫 -->

charset

聲明文檔使用的字符編碼，github

  1. <meta charset="utf-8">

html5 以前網頁中會這樣寫：

  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

這兩個是等效的，具體可移步閱讀：<meta charset='utf-8'> vs <meta http-equiv='Content-Type'>，因此建議使用較短的，易於記憶。

lang屬性

更加標準的 lang 屬性寫法 http://zhi.hu/XyIa

簡體中文

  1. <html lang="zh-cmn-Hans"> <!-- 更加標準的 lang 屬性寫法 http://zhi.hu/XyIa -->

繁體中文

  1. <html lang="zh-cmn-Hant"> <!-- 更加標準的 lang 屬性寫法 http://zhi.hu/XyIa -->

不多狀況才須要加地區代碼，一般是爲了強調不一樣地區漢語使用差別，例如：

  1. <p lang="zh-cmn-Hans">
  2. <strong lang="zh-cmn-Hans-CN">菠蘿</strong>和<strong lang="zh-cmn-Hant-TW">鳳梨</strong>實際上是同一種水果。只是大陸和臺灣稱謂不一樣，且新加坡、馬來西亞一帶的稱謂也是不一樣的，稱之爲<strong lang="zh-cmn-Hans-SG">黃梨</strong>。
  3. </p>

爲何 lang="zh-cmn-Hans" 而不是咱們一般寫的 lang="zh-CN" 呢，請移步閱讀: 頁頭部的聲明應該是用 lang=」zh」 仍是 lang=」zh-cn」。

Meta 標籤

meta標籤是HTML中head頭部的一個輔助性標籤，它位於HTML文檔頭部的 <head> 和 <title> 標記之間，它提供用戶不可見的信息。雖然這部分信息用戶不可見，可是其做用很是強大，特別是當今的前端開發工做中，設置合適的meta標籤能夠大大提高網站頁面的可用性。

桌面端開發中，meta標籤一般用來爲搜索引擎優化（SEO）及 robots定義頁面主題，或者是定義用戶瀏覽器上的cookie；它能夠用於鑑別做者，設定頁面格式，標註內容提要和關鍵字；還能夠設置頁面使其能夠根據你定義的時間間隔刷新本身，以及設置RASC內容等級，等等。

移動端開發中，meta標籤除了桌面端中的功能設置外，還包括，好比viewport設置，添加到主屏幕圖標，標籤頁顏色等等實用設置。具體能夠看後面詳細的介紹。

meta標籤分類

meta標籤根據屬性的不一樣，可分爲兩大部分：http-equiv 和 name 屬性。

http-equiv：至關於http的文件頭做用，它能夠向瀏覽器傳回一些有用的信息，以幫助瀏覽器正確地顯示網頁內容。
name屬性：主要用於描述網頁，與之對應的屬性值爲content，content中的內容主要是便於瀏覽器，搜索引擎等機器人識別，等等。

推薦使用的meta標籤

  1. <!-- 設置文檔的字符編碼 -->
  2. <meta charset="utf-8">
  3. <meta http-equiv="x-ua-compatible" content="ie=edge">
  4. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  5. <!-- 以上 3 個 meta 標籤 *必須* 放在 head 的最前面；其餘任何的 head 內容必須在這些標籤的 *後面* -->
  6.  
  7. <!-- 容許控制資源的過分加載 -->
  8. <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
  9. <!-- 儘早地放置在文檔中 -->
  10. <!-- 僅應用於該標籤下的內容 -->
  11.  
  12. <!-- Web 應用的名稱（僅當網站被用做爲一個應用時才使用）-->
  13. <meta name="application-name" content="應用名稱">
  14.  
  15. <!-- 針對頁面的簡短描述（限制 150 字符）-->
  16. <!-- 在*某些*狀況下，該描述是被用做搜索結果展現片斷的一部分 -->
  17. <meta name="description" content="一個頁面描述">
  18.  
  19. <!-- 控制搜索引擎的抓取和索引行爲 -->
  20. <meta name="robots" content="index,follow,noodp"><!-- 全部的搜索引擎 -->
  21. <meta name="googlebot" content="index,follow"><!-- 僅對 Google 有效 -->
  22.  
  23. <!-- 告訴 Google 不顯示網站連接的搜索框 -->
  24. <meta name="google" content="nositelinkssearchbox">
  25.  
  26. <!-- 告訴 Google 不提供此頁面的翻譯 -->
  27. <meta name="google" content="notranslate">
  28.  
  29. <!-- 驗證 Google 搜索控制檯的全部權 -->
  30. <meta name="google-site-verification" content="verification_token">
  31.  
  32. <!-- 用來命名軟件或用於構建網頁（如 - WordPress、Dreamweaver）-->
  33. <meta name="generator" content="program">
  34.  
  35. <!-- 關於你的網站主題的簡短描述 -->
  36. <meta name="subject" content="你的網站主題">
  37.  
  38. <!-- 很是簡短（少於 10 個字）的描述。主要用於學術論文。-->
  39. <meta name="abstract" content="">
  40.  
  41. <!-- 完整的域名或網址 -->
  42. <meta name="url" content="https://example.com/">
  43.  
  44. <meta name="directory" content="submission">
  45.  
  46. <!-- 基於網站內容給出通常的年齡分級 -->
  47. <meta name="rating" content="General">
  48.  
  49. <!-- 容許控制 referrer 信息如何傳遞 -->
  50. <meta name="referrer" content="never">
  51.  
  52. <!-- 禁用自動檢測和格式化可能的電話號碼 -->
  53. <meta name="format-detection" content="telephone=no">
  54.  
  55. <!-- 經過設置爲 「off」 徹底退出 DNS 預取 -->
  56. <meta http-equiv="x-dns-prefetch-control" content="off">
  57.  
  58. <!-- 在客戶端存儲 cookie，web 瀏覽器的客戶端識別 -->
  59. <meta http-equiv="set-cookie" content="name=value; expires=date; path=url">
  60.  
  61. <!-- 指定要顯示在一個特定框架中的頁面 -->
  62. <meta http-equiv="Window-Target" content="_value">
  63.  
  64. <!-- 地理標籤 -->
  65. <meta name="ICBM" content="latitude, longitude">
  66. <meta name="geo.position" content="latitude;longitude">
  67. <!-- 國家代碼 (ISO 3166-1): 強制性, 州代碼 (ISO 3166-2): 可選; 如 content="US" / content="US-NY" -->
  68. <meta name="geo.region" content="country[-state]">
  69. <!-- 如 content="New York City" -->
  70. <meta name="geo.placename" content="city/town">

相關的詳細說明請查看：

爲移動設備添加 viewport

viewport 可讓佈局在移動瀏覽器上顯示的更好。 一般會寫

  1. <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 -->

width=device-width 會致使 iPhone 5 添加到主屏後以 WebApp 全屏模式打開頁面時出現黑邊(http://bigc.at/ios-webapp-viewport-meta.orz)

content 參數：

  • 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 中已經刪除），能夠在頁面加載時最小化上下狀態欄。這是一個布爾值，能夠直接這樣寫：
    1. <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

而若是你的網站不是響應式的，請不要使用 initial-scale 或者禁用縮放。

  1. <meta name="viewport" content="width=device-width,user-scalable=yes">

相關連接：非響應式設計的viewport

適配 iPhone 6 和 iPhone 6plus 則須要寫：

  1. <meta name="viewport" content="width=375">
  2. <meta name="viewport" content="width=414">

大部分 4.7~5 寸的安卓設備的 viewport 寬設爲 360px，iPhone 6 上倒是 375px，大部分 5.5 寸安卓機器（好比說三星 Note）的 viewport 寬爲 400，iPhone 6 plus 上是 414px。

SEO 優化部分

  • 頁面標題<title>標籤(head 頭部必須)
    1. <title>your title</title>
  • 頁面關鍵詞 keywords
    1. <meta name="keywords" content="your keywords">
  • 頁面描述內容 description
    1. <meta name="description" content="your description">
  • 定義網頁做者 author
    1. <meta name="author" content="author,email address">
  • 定義網頁搜索引擎索引方式，robotterms 是一組使用英文逗號「,」分割的值，一般有以下幾種取值：none，noindex，nofollow，all，index和follow。
    1. <meta name="robots" content="index,follow">

相關連接：WEB1038 – 標記包含無效的值

 

百度禁止轉碼

經過百度手機打開網頁時，百度可能會對你的網頁進行轉碼，脫下你的衣服，往你的身上貼狗皮膏藥的廣告，爲此可在 head 內添加

  1. <meta http-equiv="Cache-Control" content="no-siteapp" />

相關連接：SiteApp 轉碼聲明

不推薦的 meta 屬性

下面是不推薦使用的 meta 屬性，由於它們採用率低，或已棄用：

  1. <!-- 用於聲明文檔語言，但支持得不是很好。最好使用 <html lang=""> -->
  2. <meta name="language" content="en">
  3.  
  4. <!-- Google 無視 & Bing 認爲垃圾的指示器 -->
  5. <meta name="keywords" content="你,關鍵字,在這裏,不使用空格,而用逗號進行分隔">
  6. <!-- 目前沒有在任何搜索引擎中使用過的聲明 -->
  7. <meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm">
  8.  
  9. <!-- 爲垃圾郵件機器人收穫 email 地址提供了一種簡單的方式 -->
  10. <meta name="reply-to" content="email@example.com">
  11.  
  12. <!-- 最好使用 <link rel="author"> 或 humans.txt 文件 -->
  13. <meta name="author" content="name, email@example.com">
  14. <meta name="designer" content="">
  15. <meta name="owner" content="">
  16.  
  17. <!-- 告訴搜索機器人一段時間後從新訪問該網頁。這不支持，由於大多數搜索引擎使用隨機時間間隔來從新抓取網頁 -->
  18. <meta name="revisit-after" content="7 days">
  19.  
  20. <!-- 在一段時間後將用戶重定向到新的 URL -->
  21. <!-- W3C 建議不要使用該標籤。Google 建議使用服務器端的 301 重定向。-->
  22. <meta http-equiv="refresh" content="300; url=https://example.com/">
  23.  
  24. <!-- 描述網站的主題 -->
  25. <meta name="topic" content="">
  26.  
  27. <!-- 公司概要或網站目的 -->
  28. <meta name="summary" content="">
  29.  
  30. <!-- 一個已廢棄的標籤，和關鍵詞 meta 標籤的做用相同 -->
  31. <meta name="classification" content="business">
  32.  
  33. <!-- 是不是相同的 URL，年代久遠且不支持 -->
  34. <meta name="identifier-URL" content="https://example.com/">
  35.  
  36. <!-- 和關鍵詞標籤相似的功能 -->
  37. <meta name="category" content="">
  38.  
  39. <!-- 確保你的網站在全部國家和語言中都能顯示 -->
  40. <meta name="coverage" content="Worldwide">
  41.  
  42. <!-- 和 coverage 標籤相同 -->
  43. <meta name="distribution" content="Global">
  44.  
  45. <!-- 控制在互聯網上哪些用戶能夠訪問 -->
  46. <meta http-equiv="Pics-label" content="value">
  47.  
  48. <!-- 緩存控制 -->
  49. <!-- 最好在服務器端配置緩存控制 -->
  50. <meta http-equiv="Expires" content="0">
  51. <meta http-equiv="Pragma" content="no-cache">
  52. <meta http-equiv="Cache-Control" content="no-cache">

link 標籤

說到 link 標籤，估計你們的第一反應和我同樣，就是引入外部CSS樣式文件的，不錯，這是 link 標籤最最經常使用的功能。不過它還有不少別的用處，好比這是瀏覽器 favicon 圖標，touch圖標等等。

  1. <!-- 有助於防止出現內容重複的問題 -->
  2. <link rel="canonical" href="https://example.com/2010/06/9-things-to-do-before-entering-social-media.html">
  3.  
  4. <!-- 以前用於包含 icon 連接，但已被廢棄並再也不使用 -->
  5. <link rel="shortlink" href="https://example.com/?p=42">
  6.  
  7. <!-- 連接到當前文檔的一個 AMP HTML 版本 -->
  8. <link rel="amphtml" href="https://example.com/path/to/amp-version.html">
  9.  
  10. <!-- 代表一個 CSS 樣式表 -->
  11. <link rel="stylesheet" href="https://example.com/styles.css">
  12.  
  13. <!-- 連接到一個指定 Web 應用程序「安裝」證書的 JSON 文件 -->
  14. <link rel="manifest" href="manifest.json">
  15.  
  16. <!-- 連接到文檔的做者 -->
  17. <link rel="author" href="humans.txt">
  18.  
  19. <!-- 指向一個適用於連接內容的版權申明 -->
  20. <link rel="copyright" href="copyright.html">
  21.  
  22. <!-- 給出可能的你的另外一種語言的文檔位置參考 -->
  23. <link rel="alternate" href="https://es.example.com/" hreflang="es">
  24.  
  25. <!-- 提供了關於做者或其餘人的信息 -->
  26. <link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">
  27. <link rel="me" href="mailto:name@example.com">
  28. <link rel="me" href="sms:+15035550125">
  29.  
  30. <!-- 連接到一個文檔，包含當前文檔的一個歸檔連接 -->
  31. <link rel="archives" href="https://example.com/2003/05/" title="May 2003">
  32.  
  33. <!-- 連接到層次結構中的頂級資源 -->
  34. <link rel="index" href="https://example.com/" title="DeWitt Clinton">
  35.  
  36. <!-- 給出該文檔的起點 -->
  37. <link rel="start" href="https://example.com/photos/pattern_recognition_1_about/" title="Pattern Recognition 1">
  38.  
  39. <!-- 引導當前文檔的前述資源序列 -->
  40. <link rel="prev" href="https://example.com/opensearch/opensearch-and-openid-a-sure-way-to-get-my-attention/" title="OpenSearch and OpenID? A sure way to get my attention.">
  41.  
  42. <!-- 給出一個自我參考 - 當文檔有多個可能的參考時很是有用 -->
  43. <link rel="self" type="application/atom+xml" href="https://example.com/atomFeed.php?page=3">
  44.  
  45. <!-- 分別是在一系列文件中的第一個、下一個、上一個和最後一個 -->
  46. <link rel="first" href="https://example.com/atomFeed.php">
  47. <link rel="next" href="https://example.com/atomFeed.php?page=4">
  48. <link rel="previous" href="https://example.com/atomFeed.php?page=2">
  49. <link rel="last" href="https://example.com/atomFeed.php?page=147">
  50.  
  51. <!-- 當使用第三方服務來維護 blog 時使用 -->
  52. <link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">
  53.  
  54. <!-- 當另外一個 WordPress 博客連接到你的 WordPress 博客或文章時造成一個自動化的評論 -->
  55. <link rel="pingback" href="https://example.com/xmlrpc.php">
  56.  
  57. <!-- 當你在本身的頁面上連接到一個 url 時通知它 -->
  58. <link rel="webmention" href="https://example.com/webmention">
  59.  
  60. <!-- 加載一個外部的 HTML 文件到當前 HTML 文件中 -->
  61. <link rel="import" href="component.html">
  62.  
  63. <!-- 打開搜索 -->
  64. <link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title">
  65.  
  66. <!-- Feeds -->
  67. <link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">
  68. <link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">
  69.  
  70. <!-- 預取，預載，預瀏覽 -->
  71. <link rel="dns-prefetch" href="//example.com/">
  72. <link rel="preconnect" href="https://www.example.com/">
  73. <link rel="prefetch" href="https://www.example.com/">
  74. <link rel="prerender" href="https://example.com/">
  75. <link rel="preload" href="image.png" as="image">
  76. <!-- 更多信息：https://css-tricks.com/prefetching-preloading-prebrowsing/ -->

具體說明查看：https://css-tricks.com/prefetching-preloading-prebrowsing/

rss訂閱

  1. <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- 添加 RSS 訂閱 -->

不推薦的link標籤

如下是不推薦使用的連接關係：

  1. <link rel="shortcut icon" href="path/to/favicon.ico">
  2.  
  3. <!-- 沒有用的, 專有的和錯誤的, 詳見 https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/Y_2eFRh9BOs/gULYapoRBwAJ -->
  4. <link rel="subresource" href="styles.css">

具體說明查看：https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/Y_2eFRh9BOs/gULYapoRBwAJ

favicon 圖標

IE 11, Chrome, Firefox, Safari, Opera支持<link>形式設置：

  1. <link rel="icon" href="path/to/favicon-16.png" sizes="16x16" type="image/png">
  2. <link rel="icon" href="path/to/favicon-32.png" sizes="32x32" type="image/png">
  3. <link rel="icon" href="path/to/favicon-48.png" sizes="48x48" type="image/png">
  4. <link rel="icon" href="path/to/favicon-62.png" sizes="62x62" type="image/png">
  5. <link rel="icon" href="path/to/favicon-192.png" sizes="192x192" type="image/png">

注意：對於IE 10及如下版本不支持<link>形式設置，只經過將命名爲favicon.ico的文件放置在網站根目錄中實現。

比較詳細的 favicon 介紹可參考：

瀏覽器及平臺詳細說明

QQ 瀏覽器（X5 內核）

QQ 瀏覽器（X5 內核）一樣適用於微信，QQ等第三方應用頁面開發。

  1. <!-- 設置鎖定橫屏、豎屏顯示模式，portrait（橫屏），landscape（豎屏）-->
  2. <meta name="x5-orientation" content="portrait|landscape">
  3. <!-- 設置全屏顯示頁面 -->
  4. <meta name="x5-fullscreen" content="true">
  5. <!-- 開啓頁面以應用模式顯示（全屏顯示等） -->
  6. <meta name="x5-page-mode" content="app">

360瀏覽器

設置 360 瀏覽器渲染模式：webkit 爲極速內核，ie-comp 爲 IE 兼容內核，ie-stand 爲 IE 標準內核。

  1. <meta name="renderer" content="webkit|ie-comp|ie-stand">

詳情文檔連接：瀏覽器內核控制Meta標籤說明文檔
360 瀏覽器就會在讀取到這個標籤後，當即切換對應的極速核。 另外爲了保險起見再加入

  1. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

這樣寫能夠達到的效果是若是安裝了 Google Chrome Frame，則使用 GCF 來渲染頁面，若是沒有安裝 GCF，則使用最高版本的 IE 內核進行渲染。

UC 瀏覽器

設置屏幕方向

portrait 爲橫屏，landscape 爲豎屏。

  1. <meta name="screen-orientation" content="portrait|landscape">

設置全屏

  1. <meta name="full-screen" content="yes">

設置適應屏幕排版（縮放是否顯示滾動條）

UC 瀏覽器在標準排版效果實現的基礎上，提供適應屏幕的排版方式，當設置爲 uc-fitscreen=yes，頁面進行縮放操做時，僅放大圖片和文字等元素，但不放大屏幕寬度，保持不出現水平（橫向）滾動條。

  1. <meta name="viewport" content="uc-fitscreen=no|yes">

排版模式

UC 瀏覽器提供兩種排版模式，分別是適屏模式（fitscreen）及標準模式（standard），其中適屏模式簡化了一些頁面的處理，使得頁面內容更適合進行頁面閱讀、節省流量及響應更快，而標準模式則能按照標準規範對頁面進行排版及渲染。

  1. <meta name="layoutmode" content="fitscreen|standard">

夜間模式

能夠幫助用戶在低亮度或黑暗狀況下更溫馨的進行頁面瀏覽。因爲基於網頁的應用越發複雜，由瀏覽器實現的單一晚上間模式不必定可以適應全部狀況(例如遊戲應用)，所以 UC 瀏覽器容許網頁設計者對其設計的頁面禁用瀏覽器的夜間模式，自行設計更適合用戶使用的夜間模式。

注意：頁面內的 frame/iframe 中的夜間模式的 meta 不生效。

  1. <meta name="nightmode" content="enable|disable">

整頁圖片強制顯示

爲了節省流量及加快速度，UC 爲用戶提供了無圖模式，在實際使用中存在頁面中的圖片是不可缺乏的，例如驗證碼，地圖等。經過強制圖片顯示的功能能夠保證圖片顯示不受用戶的設置影響。

**注意：整頁圖片強制顯示僅對當前頁面生效，對頁面內的 frame/iframe 不生效，也不影響前進後退的頁面

  1. <meta name="imagemode" content="force">

開啓應用模式

  1. <meta name="browsermode" content="application">

應用模式是爲方便 Web 應用及遊戲開發者設置的綜合開關，經過meta標籤進行指示打開，當進入應用模式時，瀏覽器將自動調整如下參數:

參數 狀態 說明
全屏 生效 可經過 meta 或 JS API 調用退出全屏
長按菜單 失效 可經過 JS API 調用從新生效
瀏覽器默認手勢 失效 可經過 JS API 調用從新生效
排版模式 標準模式 可經過 meta 或 JS API 調用設置其餘排版模式
強制圖片顯示 生效 /
夜間模式 失效 可經過 meta 或 JS API 調用啓用夜間模式

縮放字體

例如：禁用的 UC 瀏覽器的字體縮放功能

  1. <meta name="wap-font-scale" content="no">

具體UC 瀏覽器文檔連接：UC 瀏覽器文檔

Apple iOS原生瀏覽器

添加智能 App 廣告條

告訴瀏覽器這個網站對應的app，並在頁面上顯示下載banner，須要注意的是Smart App Banners標籤不能用在frame框架內部，不然不起做用。

其中app-id(必須), affiliate-data (可選), app-argument (可選)

  1. <meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">

例如Digg的寫法：

  1. <meta name="apple-itunes-app" content="app-id=362872995, affiliate-data=bevbOqLt02I, app-argument=digg://">

忽略數字自動識別爲電話號碼

  1. <meta name="format-detection" content="telephone=no">

啓用 WebApp 全屏模式

  1. <meta name="apple-mobile-web-app-capable" content="yes">
添加到主屏後設置狀態欄的背景顏色
  1. <meta name="apple-mobile-web-app-status-bar-style" content="black">

只有在 「apple-mobile-web-app-capable」 content=」yes」 時生效。

  • 若是設置爲 default 或 black ，網頁內容從狀態欄底部開始。
  • 若是設置爲 black-translucent ，網頁內容充滿整個屏幕，頂部會被狀態欄遮擋。
添加到主屏後的標題（iOS 6 新增）
  1. <meta name="apple-mobile-web-app-title" content="App Title">

iOS 圖標

圖片自動處理成圓角和高光等效果。

  1. <link rel="apple-touch-icon" href="path/to/apple-touch-icon.png">

禁止系統自動添加效果，直接顯示設計原圖。

  1. <link rel="apple-touch-icon-precomposed" href="path/to/apple-touch-icon-precomposed.png">

iOS 8+ 再也不支持 precomposed, 只有 apple-touch-icon 是必須的
在大多數狀況下，在head中一個180×180px的圖標就足夠了。若是您想要由設備肯定的惟一圖標，請使用不一樣大小的圖標。

  1. <link rel="apple-touch-icon" sizes="57x57" href="path/to/icon@57.png">
  2. <link rel="apple-touch-icon" sizes="72x72" href="path/to/icon@72.png">
  3. <link rel="apple-touch-icon" sizes="114x114" href="path/to/icon@114.png">
  4. <link rel="apple-touch-icon" sizes="144x144" href="path/to/icon@144.png">

啓動畫面 ( 不同意使用 )

iPad 的啓動畫面是不包括狀態欄區域的，iPhone 和 iPod touch 的啓動畫面是包含狀態欄區域的

  1. <link rel="apple-touch-startup-image" href="path/to/startup.png">

具體描述設置請查看http://www.css88.com/archives/5480中相應的說明。

iOS 應用深度連接

  1. <meta name="apple-itunes-app" content="app-id=APP-ID, app-argument=http/url-sample.com">
  2. <link rel="alternate" href="ios-app://APP-ID/http/url-sample.com">

Google Android原生瀏覽器

標籤頁選項卡顏色

Android Lollipop 中的 Chrome 39 增長 theme-color meta 標籤，用來控制選項卡顏色。

http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android

68747470733a2f2f646576656c6f706572732e676f6f676c652e636f6d2f7765622f757064617465732f696d616765732f323031342f31312f7468656d652d636f6c6f722d73732e706e67

  1. <meta name="theme-color" content="#db5945">

添加到主屏

  1. <!-- 添加到主屏 -->
  2. <meta name="mobile-web-app-capable" content="yes">

詳細連接: https://developer.chrome.com/multidevice/android/installtohomescreen

安卓應用深度連接（網頁上喚起應用）

  1. <!-- Android app deep linking -->
  2. <meta name="google-play-app" content="app-id=package-name">
  3. <link rel="alternate" href="android-app://package-name/http/url-sample.com">

注：貌似沒測試成功，若是你知道如何正確設置，歡迎留言斧正。

Apple Safari 瀏覽器

Safari 10開始支持固定書籤頁的SVG favicons了，你能夠這樣使用：

  1. <!-- Pinned Site -->
  2. <link rel="mask-icon" href="path/to/icon.svg" color="red">

相似的效果
safari-pinned-tabs
擴展閱讀：https://yoast.com/dev-blog/safari-pinned-tab-icon-mask-icon/

Google Chrome瀏覽器

關閉chrome瀏覽器下翻譯插件

有些時候感受chrome瀏覽器下翻譯插件很煩人，能夠經過下面的代碼禁用它。

  1. <meta name="google" value="notranslate" />

BB5FACB6-7DFE-41D6-AB27-9C2E91130061

chrome瀏覽器插件安裝

有時候，你須要在你的頁面上點擊某個安卓，直接安卓你的chrome瀏覽器插件，而不是連接到Chrome webstore 的詳細地址再安裝，那麼你可使用：

  1. <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID">

具體使用，請查看：Using Inline Installation

Google Chrome Mobile (只針對 Android)

從 Chrome 31 開始，你能夠設置你的 Web 應用爲「app mode」，如 Safari。

  1. <!-- 連接到一個 manifest 並定義 manifest 的元數據。-->
  2. <!-- manifest.json 中的例子也能夠經過如下連接找到。-->
  3. <link rel="manifest" href="manifest.json">
  4.  
  5. <!-- 定義你的網頁爲 Web 應用 -->
  6. <meta name="mobile-web-app-capable" content="yes">
  7.  
  8. <!-- 第一個是官方推薦格式。-->
  9. <link rel="icon" sizes="192x192" href="nice-highres.png">
  10. <link rel="icon" sizes="128x128" href="niceicon.png">
  11. <!-- 全部帶 apple 前綴的格式已廢棄，因此不要使用它們。-->
  12. <link rel="apple-touch-icon" sizes="128x128" href="niceicon.png">
  13. <link rel="apple-touch-icon-precomposed" sizes="128x128" href="niceicon.png">

Internet Explorer瀏覽器

模式設置

  1. //IE8如下以IE7標準模式呈現網頁，而IE9則以IE9的標準模式呈現網頁：
  2. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
  3. //若是安裝了GCF，則使用GCF來渲染頁面（"chrome=1"），
  4. //若是沒有安裝GCF，則使用最高版本的IE內核進行渲染（"IE=edge"）
  5. <meta http-equiv="x-ua-compatible" content="ie=edge">

GCF（Google Chrome Frame ）相關連接：https://www.chromium.org/developers/how-tos/chrome-frame-getting-started

X-UA-Compatible相關連接：https://blogs.msdn.microsoft.com/ie/2010/06/16/ies-compatibility-features-for-site-developers/

win8,win10下的一些設置

  1. <meta http-equiv="cleartype" content="on">
  2. <meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
  3.  
  4. <!--
  5. Disable link highlighting on IE 10 on Windows Phone
  6. 具體說明查看：https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/-->
  7. <meta name="msapplication-tap-highlight" content="no">
  8.  
  9. <!--
  10. Pinned sites
  11. 具體說明查看：https://msdn.microsoft.com/en-us/library/dn255024(v=vs.85).aspx-->
  12. <meta name="application-name" content="Contoso Pinned Site Caption">
  13. <meta name="msapplication-tooltip" content="Example Tooltip Text">
  14. <meta name="msapplication-starturl" content="/">
  15.  
  16. <meta name="msapplication-config" content="http://example.com/browserconfig.xml">
  17.  
  18. <meta name="msapplication-allowDomainApiCalls" content="true">
  19. <meta name="msapplication-allowDomainMetaTags" content="true">
  20. <meta name="msapplication-badge" content="frequency=30; polling-uri=http://example.com/id45453245/polling.xml">
  21. <meta name="msapplication-navbutton-color" content="#FF3300">
  22. <meta name="msapplication-notification" content="frequency=60;polling-uri=http://example.com/livetile">
  23. <meta name="msapplication-square150x150logo" content="path/to/logo.png">
  24. <meta name="msapplication-square310x310logo" content="path/to/largelogo.png">
  25. <meta name="msapplication-square70x70logo" content="path/to/tinylogo.png">
  26. <meta name="msapplication-wide310x150logo" content="path/to/widelogo.png">
  27. <meta name="msapplication-task" content="name=Check Order Status;action-uri=./orderStatus.aspx?src=IE9;icon-uri=./favicon.ico">
  28. <meta name="msapplication-task-separator" content="1">
  29. //Windows 8 磁貼顏色
  30. <meta name="msapplication-TileColor" content="#FF3300">
  31. //Windows 8 磁貼圖標
  32. <meta name="msapplication-TileImage" content="path/to/tileimage.jpg">
  33. <meta name="msapplication-window" content="width=1024;height=768">

APP 連接

  1. <!-- iOS -->
  2. <meta property="al:ios:url" content="applinks://docs">
  3. <meta property="al:ios:app_store_id" content="12345">
  4. <meta property="al:ios:app_name" content="App Links">
  5. <!-- Android -->
  6. <meta property="al:android:url" content="applinks://docs">
  7. <meta property="al:android:app_name" content="App Links">
  8. <meta property="al:android:package" content="org.applinks">
  9. <!-- Web Fallback -->
  10. <meta property="al:web:url" content="http://applinks.org/documentation">
  11. <!-- More info: http://applinks.org/documentation/ -->

具體請查看：App Links Docs

相關項目

參考閱讀文章：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程