[轉] 移動前端不得不瞭解的HTML5 head 頭標籤

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

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

HTML基本的頭部標籤

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

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

其中 html 代碼:前端

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

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

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

也能夠省略。html5

 

DOCTYPE

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

使用 HTML5 doctype,不區分大小寫。ios

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

charset

聲明文檔使用的字符編碼,git

<meta charset="utf-8">

html5 以前網頁中會這樣寫:github

<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

簡體中文

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

繁體中文

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

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

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

<!-- 設置文檔的字符編碼 -->
<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 -->

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

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

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

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

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

<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。

 

SEO 優化部分

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

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

 

百度禁止轉碼

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

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

相關連接:SiteApp 轉碼聲明

 

不推薦的 meta 屬性

下面是不推薦使用的 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">

 

link 標籤

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

<!-- 有助於防止出現內容重複的問題 -->
<link rel="canonical" href="https://example.com/2010/06/9-things-to-do-before-entering-social-media.html">
 
<!-- 以前用於包含 icon 連接,但已被廢棄並再也不使用 -->
<link rel="shortlink" href="https://example.com/?p=42">

<!-- 連接到當前文檔的一個 AMP HTML 版本 -->
<link rel="amphtml" href="https://example.com/path/to/amp-version.html">

<!-- 代表一個 CSS 樣式表 -->
<link rel="stylesheet" href="https://example.com/styles.css">

<!-- 連接到一個指定 Web 應用程序「安裝」證書的 JSON 文件 -->
<link rel="manifest" href="manifest.json">

<!-- 連接到文檔的做者 -->
<link rel="author" href="humans.txt">

<!-- 指向一個適用於連接內容的版權申明 -->
<link rel="copyright" href="copyright.html">

<!-- 給出可能的你的另外一種語言的文檔位置參考 -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">

<!-- 提供了關於做者或其餘人的信息 -->
<link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">
<link rel="me" href="mailto:name@example.com">
<link rel="me" href="sms:+15035550125">

<!-- 連接到一個文檔,包含當前文檔的一個歸檔連接 -->
<link rel="archives" href="https://example.com/2003/05/" title="May 2003">

<!-- 連接到層次結構中的頂級資源 -->
<link rel="index" href="https://example.com/" title="DeWitt Clinton">

<!-- 給出該文檔的起點 -->
<link rel="start" href="https://example.com/photos/pattern_recognition_1_about/" title="Pattern Recognition 1">

<!-- 引導當前文檔的前述資源序列 -->
<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.">

<!-- 給出一個自我參考 - 當文檔有多個可能的參考時很是有用 -->
<link rel="self" type="application/atom+xml" href="https://example.com/atomFeed.php?page=3">

<!-- 分別是在一系列文件中的第一個、下一個、上一個和最後一個 -->
<link rel="first" href="https://example.com/atomFeed.php">
<link rel="next" href="https://example.com/atomFeed.php?page=4">
<link rel="previous" href="https://example.com/atomFeed.php?page=2">
<link rel="last" href="https://example.com/atomFeed.php?page=147">
 
<!-- 當使用第三方服務來維護 blog 時使用 -->
<link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">

<!-- 當另外一個 WordPress 博客連接到你的 WordPress 博客或文章時造成一個自動化的評論 -->
<link rel="pingback" href="https://example.com/xmlrpc.php">

<!-- 當你在本身的頁面上連接到一個 url 時通知它 -->
<link rel="webmention" href="https://example.com/webmention">

<!-- 加載一個外部的 HTML 文件到當前 HTML 文件中 -->
<link rel="import" href="component.html">
 
<!-- 打開搜索 -->
<link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title">
 
<!-- Feeds -->
<link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">
<link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">

<!-- 預取,預載,預瀏覽 -->
<link rel="dns-prefetch" href="//example.com/">
<link rel="preconnect" href="https://www.example.com/">
<link rel="prefetch" href="https://www.example.com/">
<link rel="prerender" href="https://example.com/">
<link rel="preload" href="image.png" as="image">
<!-- 更多信息:https://css-tricks.com/prefetching-preloading-prebrowsing/ -->

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

rss訂閱

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

 

不推薦的link標籤

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

<link rel="shortcut icon" href="path/to/favicon.ico">
 
<!-- 沒有用的, 專有的和錯誤的, 詳見 https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/Y_2eFRh9BOs/gULYapoRBwAJ -->
<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>形式設置:

<link rel="icon" href="path/to/favicon-16.png" sizes="16x16" type="image/png">
<link rel="icon" href="path/to/favicon-32.png" sizes="32x32" type="image/png">
<link rel="icon" href="path/to/favicon-48.png" sizes="48x48" type="image/png">
<link rel="icon" href="path/to/favicon-62.png" sizes="62x62" type="image/png">
<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等第三方應用頁面開發。

<!-- 設置鎖定橫屏、豎屏顯示模式,portrait(橫屏),landscape(豎屏)-->
<meta name="x5-orientation" content="portrait|landscape">

<!-- 設置全屏顯示頁面 -->
<meta name="x5-fullscreen" content="true">

<!-- 開啓頁面以應用模式顯示(全屏顯示等) -->
<meta name="x5-page-mode" content="app">

360瀏覽器

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

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

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

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

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

 

UC 瀏覽器

設置屏幕方向

portrait 爲橫屏,landscape 爲豎屏。

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

設置全屏

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

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

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

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

排版模式

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

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

夜間模式

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

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

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

整頁圖片強制顯示

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

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

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

開啓應用模式

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

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

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

縮放字體

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

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

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

 

Apple iOS原生瀏覽器

添加智能 App 廣告條

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

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

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

例如Digg的寫法:

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

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

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

啓用 WebApp 全屏模式

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

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

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

iOS 圖標

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

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

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

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

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

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

啓動畫面 ( 不同意使用 )

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

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

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

iOS 應用深度連接

<meta name="apple-itunes-app" content="app-id=APP-ID, app-argument=http/url-sample.com">
<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

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

添加到主屏

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

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

安卓應用深度連接(網頁上喚起應用)

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

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

 

Apple Safari 瀏覽器

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

<!-- Pinned Site -->
<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瀏覽器下翻譯插件很煩人,能夠經過下面的代碼禁用它。

 

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

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

chrome瀏覽器插件安裝

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

<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。

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

 

Internet Explorer瀏覽器

模式設置

//IE8如下以IE7標準模式呈現網頁,而IE9則以IE9的標準模式呈現網頁: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9"> //若是安裝了GCF,則使用GCF來渲染頁面("chrome=1"), //若是沒有安裝GCF,則使用最高版本的IE內核進行渲染("IE=edge") <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下的一些設置

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

 

APP 連接

<!-- iOS -->
<meta property="al:ios:url" content="applinks://docs">
<meta property="al:ios:app_store_id" content="12345">
<meta property="al:ios:app_name" content="App Links">
<!-- Android -->
<meta property="al:android:url" content="applinks://docs">
<meta property="al:android:app_name" content="App Links">
<meta property="al:android:package" content="org.applinks">
<!-- Web Fallback -->
<meta property="al:web:url" content="http://applinks.org/documentation">
<!-- More info: http://applinks.org/documentation/ -->

具體請查看:App Links Docs

 

相關項目

參考閱讀文章:

本文轉自移動前端不得不瞭解的HTML5 head 頭標籤(2016最新版)

相關文章
相關標籤/搜索