HTML5頭部<head>標(biāo)簽常用信息

VoidOc 2019-12-08

展開全文

查找總結(jié)了一些HTML5頭部<head>標(biāo)簽常用信息，有錯(cuò)誤的，敬請(qǐng)留言指正，或可以留言補(bǔ)充，歡迎留言交流！

<!-- 字體編碼 -->
<meta charset="utf-8" />

<!-- 關(guān)鍵字 -->
<meta name="keywords" content="" />

<!-- 說明 -->
<meta name="description" content="" />

<!-- 作者 -->
<meta name="author" content="" />

<!-- 設(shè)置文檔寬度、是否縮放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />

<!-- 優(yōu)先使用IE最新版本或chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<!-- 360讀取到這個(gè)標(biāo)簽立即錢換到極速模式 -->
<meta name="renderer" content="webkit" />

<!-- 禁止百度轉(zhuǎn)碼 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />

<!-- UC強(qiáng)制豎屏 -->
<meta name="screen-orientation" content="portrait" />

<!-- QQ強(qiáng)制豎屏 -->
<meta name="x5-orientation" content="portrait" />

<!-- UC強(qiáng)制全屏 -->
<meta name="full-scerrn" content="yes" />

<!-- QQ強(qiáng)制全屏 -->
<meta name="x5-fullscreen" content="ture" />

<!-- QQ應(yīng)用模式 -->
<meta name="x5-page-mode" content="app" />

<!-- UC應(yīng)用模式 -->
<meta name="browsermode" content="application">

<!-- window phone 點(diǎn)亮無(wú)高光 -->
<meta name="msapplication-tap-highlight" content="no" />

<!-- 安卓設(shè)備不自動(dòng)識(shí)別郵件地址 -->
<meta name="format-detection" name="email=no" />

<!-- iOS設(shè)備 -->

<!-- 添加到主屏幕的標(biāo)題 -->
<meta name="apple-mobile-web-app-title" content="標(biāo)題" />

<!-- 是否啟用webApp全屏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- 設(shè)置狀態(tài)欄的背景顏色，啟用webapp模式時(shí)生效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent/black/default" />
<!-- 半透明/黑色/默認(rèn)白色 -->

<!-- 禁止數(shù)字識(shí)別為電話號(hào)碼 -->
<meta name="format-detection" content="telephone=no" />

<!-- 智能添加廣告條 -->
<meta name="apple-itunes-app" content="app-id=myappstoreID,affiliate-data=myaffiliatedata,app-argument=myurl" />

為移動(dòng)設(shè)備添加 viewport

viewport 可以讓布局在移動(dòng)瀏覽器上顯示的更好。通常會(huì)寫

<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> 

<!-- `width=device-width` 會(huì)導(dǎo)致 iPhone 5 添加到主屏后以 WebApp 全屏模式打開頁(yè)面時(shí)出現(xiàn)黑邊 
http:///ios-webapp-viewport-meta.orz -->

content 參數(shù)：

width viewport 寬度(數(shù)值/device-width)
height viewport 高度(數(shù)值/device-height)
initial-scale 初始縮放比例
maximum-scale 最大縮放比例
minimum-scale 最小縮放比例
user-scalable 是否允許用戶縮放(yes/no)
minimal-ui iOS 7.1 beta 2 中新增屬性（注意：iOS8 中已經(jīng)刪除），可以在頁(yè)面加載時(shí)最小化上下狀態(tài)欄。這是一個(gè)布爾值，可以直接這樣寫：

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

而如果你的網(wǎng)站不是響應(yīng)式的，請(qǐng)不要使用 initial-scale 或者禁用縮放。

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

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

<meta name="viewport" content="width=375">
<meta name="viewport" content="width=414">

大部分 4.7~5 寸的安卓設(shè)備的 viewport 寬設(shè)為 360px，iPhone 6 上卻是 375px，大部分 5.5 寸安卓機(jī)器（比如說三星 Note）的 viewport 寬為 400，iPhone 6 plus 上是 414px。

SEO 優(yōu)化部分

頁(yè)面標(biāo)題<title>標(biāo)簽(head 頭部必須)

<title>your title</title>

頁(yè)面關(guān)鍵詞 keywords

<meta name="keywords" content="your keywords">

頁(yè)面描述內(nèi)容 description

<meta name="description" content="your description">

定義網(wǎng)頁(yè)作者 author

<meta name="author" content="author,email address">

定義網(wǎng)頁(yè)搜索引擎索引方式，robotterms 是一組使用英文逗號(hào)「,」分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。

<meta name="robots" content="index,follow">

百度禁止轉(zhuǎn)碼

通過百度手機(jī)打開網(wǎng)頁(yè)時(shí)，百度可能會(huì)對(duì)你的網(wǎng)頁(yè)進(jìn)行轉(zhuǎn)碼，脫下你的衣服，往你的身上貼狗皮膏藥的廣告，為此可在 head 內(nèi)添加

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

不推薦的 meta 屬性

下面是不推薦使用的 meta 屬性，因?yàn)樗鼈儾捎寐实?，或已棄用?/p>

<!-- 用于聲明文檔語(yǔ)言，但支持得不是很好。最好使用 <html lang=""> -->
<meta name="language" content="en">
 
<!-- Google 無(wú)視 & Bing 認(rèn)為垃圾的指示器 -->
<meta name="keywords" content="你,關(guān)鍵字,在這里,不使用空格,而用逗號(hào)進(jìn)行分隔">
<!-- 目前沒有在任何搜索引擎中使用過的聲明 -->
<meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm">
 
<!-- 為垃圾郵件機(jī)器人收獲 email 地址提供了一種簡(jiǎn)單的方式 -->
<meta name="reply-to" content="email@">
 
<!-- 最好使用 <link rel="author"> 或 humans.txt 文件 -->
<meta name="author" content="name, email@">
<meta name="designer" content="">
<meta name="owner" content="">
 
<!-- 告訴搜索機(jī)器人一段時(shí)間后重新訪問該網(wǎng)頁(yè)。這不支持，因?yàn)榇蠖鄶?shù)搜索引擎使用隨機(jī)時(shí)間間隔來重新抓取網(wǎng)頁(yè) -->
<meta name="revisit-after" content="7 days">
 
<!-- 在一段時(shí)間后將用戶重定向到新的 URL -->
<!-- W3C 建議不要使用該標(biāo)簽。Google 建議使用服務(wù)器端的 301 重定向。-->
<meta http-equiv="refresh" content="300; url=https:///">
 
<!-- 描述網(wǎng)站的主題 -->
<meta name="topic" content="">
 
<!-- 公司概要或網(wǎng)站目的 -->
<meta name="summary" content="">
 
<!-- 一個(gè)已廢棄的標(biāo)簽，和關(guān)鍵詞 meta 標(biāo)簽的作用相同 -->
<meta name="classification" content="business">
 
<!-- 是否是相同的 URL，年代久遠(yuǎn)且不支持 -->
<meta name="identifier-URL" content="https:///">
 
<!-- 和關(guān)鍵詞標(biāo)簽類似的功能 -->
<meta name="category" content="">
 
<!-- 確保你的網(wǎng)站在所有國(guó)家和語(yǔ)言中都能顯示 -->
<meta name="coverage" content="Worldwide">
 
<!-- 和 coverage 標(biāo)簽相同 -->
<meta name="distribution" content="Global">
 
<!-- 控制在互聯(lián)網(wǎng)上哪些用戶可以訪問 -->
<meta http-equiv="Pics-label" content="value"> 
 
<!-- 緩存控制 -->
<!-- 最好在服務(wù)器端配置緩存控制 -->
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">

link 標(biāo)簽

說到 link 標(biāo)簽，估計(jì)大家的第一反應(yīng)和我一樣，就是引入外部CSS樣式文件的，不錯(cuò)，這是 link 標(biāo)簽最最常用的功能。不過它還有很多別的用處，比如這是瀏覽器 favicon 圖標(biāo)，touch圖標(biāo)等等。

<!-- 有助于防止出現(xiàn)內(nèi)容重復(fù)的問題 -->
<link rel="canonical" href="https:///2010/06/9-things-to-do-before-entering-social-media.html">
 
<!-- 之前用于包含 icon 鏈接，但已被廢棄并不再使用 -->
<link rel="shortlink" href="https:///?p=42">
 
<!-- 鏈接到當(dāng)前文檔的一個(gè) AMP HTML 版本 -->
<link rel="amphtml" href="https:///path/to/amp-version.html">
 
<!-- 表明一個(gè) CSS 樣式表 -->
<link rel="stylesheet" href="https:///styles.css">
 
<!-- 鏈接到一個(gè)指定 Web 應(yīng)用程序“安裝”證書的 JSON 文件 -->
<link rel="manifest" href="manifest.json">
 
<!-- 鏈接到文檔的作者 -->
<link rel="author" href="humans.txt">
 
<!-- 指向一個(gè)適用于鏈接內(nèi)容的版權(quán)申明 -->
<link rel="copyright" href="copyright.html">
 
<!-- 給出可能的你的另一種語(yǔ)言的文檔位置參考 -->
<link rel="alternate" href="https://es./" hreflang="es">
 
<!-- 提供了關(guān)于作者或其他人的信息 -->
<link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">
<link rel="me" href="mailto:name@">
<link rel="me" href="sms:+15035550125">
 
<!-- 鏈接到一個(gè)文檔，包含當(dāng)前文檔的一個(gè)歸檔鏈接 -->
<link rel="archives" href="https:///2003/05/" title="May 2003">
 
<!-- 鏈接到層次結(jié)構(gòu)中的頂級(jí)資源 -->
<link rel="index" href="https:///" title="DeWitt Clinton">
 
<!-- 給出該文檔的起點(diǎn) -->
<link rel="start" href="https:///photos/pattern_recognition_1_about/" title="Pattern Recognition 1">
 
<!-- 引導(dǎo)當(dāng)前文檔的前述資源序列 -->
<link rel="prev" href="https:///opensearch/opensearch-and-openid-a-sure-way-to-get-my-attention/" 
title="OpenSearch and OpenID? A sure way to get my attention.">
 
<!-- 給出一個(gè)自我參考 - 當(dāng)文檔有多個(gè)可能的參考時(shí)非常有用 -->
<link rel="self" type="application/atom+xml" href="https:///atomFeed.php?page=3">
 
<!-- 分別是在一系列文件中的第一個(gè)、下一個(gè)、上一個(gè)和最后一個(gè) -->
<link rel="first" href="https:///atomFeed.php">
<link rel="next" href="https:///atomFeed.php?page=4">
<link rel="previous" href="https:///atomFeed.php?page=2">
<link rel="last" href="https:///atomFeed.php?page=147">
 
<!-- 當(dāng)使用第三方服務(wù)來維護(hù) blog 時(shí)使用 -->
<link rel="EditURI" href="https:///xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">
 
<!-- 當(dāng)另一個(gè) WordPress 博客鏈接到你的 WordPress 博客或文章時(shí)形成一個(gè)自動(dòng)化的評(píng)論 -->
<link rel="pingback" href="https:///xmlrpc.php">
 
<!-- 當(dāng)你在自己的頁(yè)面上鏈接到一個(gè) url 時(shí)通知它 -->
<link rel="webmention" href="https:///webmention">
 
<!-- 加載一個(gè)外部的 HTML 文件到當(dāng)前 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./example" type="application/rss+xml" title="RSS">
<link rel="alternate" href="https:///feed.atom" type="application/atom+xml" title="Atom 0.3">
 
<!-- 預(yù)取，預(yù)載，預(yù)瀏覽 -->
<link rel="dns-prefetch" href="http:///">
<link rel="preconnect" href="https://www./">
<link rel="prefetch" href="https://www./">
<link rel="prerender" href="https:///">
<link rel="preload" href="image.png" as="image">
<!-- 更多信息：https:///prefetching-preloading-prebrowsing/ -->

rss訂閱

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

不推薦的link標(biāo)簽

以下是不推薦使用的鏈接關(guān)系：

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

favicon 圖標(biāo)

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

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

注意：對(duì)于IE 10及以下版本不支持<link>形式設(shè)置，只通過將命名為favicon.ico的文件放置在網(wǎng)站根目錄中實(shí)現(xiàn)。

瀏覽器及平臺(tái)詳細(xì)說明

QQ 瀏覽器（X5 內(nèi)核）

QQ 瀏覽器（X5 內(nèi)核）同樣適用于微信，QQ等第三方應(yīng)用頁(yè)面開發(fā)。

<!-- 設(shè)置鎖定橫屏、豎屏顯示模式，portrait（橫屏），landscape（豎屏）-->
<meta name="x5-orientation" content="portrait|landscape">
<!-- 設(shè)置全屏顯示頁(yè)面 -->
<meta name="x5-fullscreen" content="true">
<!-- 開啟頁(yè)面以應(yīng)用模式顯示（全屏顯示等） -->
<meta name="x5-page-mode" content="app">

360瀏覽器

設(shè)置 360 瀏覽器渲染模式：webkit 為極速內(nèi)核，ie-comp 為 IE 兼容內(nèi)核，ie-stand 為 IE 標(biāo)準(zhǔn)內(nèi)核。

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

360 瀏覽器就會(huì)在讀取到這個(gè)標(biāo)簽后，立即切換對(duì)應(yīng)的極速核。另外為了保險(xiǎn)起見再加入

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

這樣寫可以達(dá)到的效果是如果安裝了 Google Chrome Frame，則使用 GCF 來渲染頁(yè)面，如果沒有安裝 GCF，則使用最高版本的 IE 內(nèi)核進(jìn)行渲染。

UC 瀏覽器

設(shè)置屏幕方向

portrait 為橫屏，landscape 為豎屏。

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

設(shè)置全屏

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

設(shè)置適應(yīng)屏幕排版（縮放是否顯示滾動(dòng)條）

UC 瀏覽器在標(biāo)準(zhǔn)排版效果實(shí)現(xiàn)的基礎(chǔ)上，提供適應(yīng)屏幕的排版方式，當(dāng)設(shè)置為 uc-fitscreen=yes，頁(yè)面進(jìn)行縮放操作時(shí)，僅放大圖片和文字等元素，但不放大屏幕寬度，保持不出現(xiàn)水平（橫向）滾動(dòng)條。

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

排版模式

UC 瀏覽器提供兩種排版模式，分別是適屏模式（fitscreen）及標(biāo)準(zhǔn)模式（standard），其中適屏模式簡(jiǎn)化了一些頁(yè)面的處理，使得頁(yè)面內(nèi)容更適合進(jìn)行頁(yè)面閱讀、節(jié)省流量及響應(yīng)更快，而標(biāo)準(zhǔn)模式則能按照標(biāo)準(zhǔn)規(guī)范對(duì)頁(yè)面進(jìn)行排版及渲染。

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

夜間模式

可以幫助用戶在低亮度或黑暗情況下更舒適的進(jìn)行頁(yè)面瀏覽。由于基于網(wǎng)頁(yè)的應(yīng)用愈加復(fù)雜，由瀏覽器實(shí)現(xiàn)的單一夜間模式不一定能夠適應(yīng)所有情況(例如游戲應(yīng)用)，因此 UC 瀏覽器允許網(wǎng)頁(yè)設(shè)計(jì)者對(duì)其設(shè)計(jì)的頁(yè)面禁用瀏覽器的夜間模式，自行設(shè)計(jì)更適合用戶使用的夜間模式。

注意：頁(yè)面內(nèi)的 frame/iframe 中的夜間模式的 meta 不生效。

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

整頁(yè)圖片強(qiáng)制顯示

為了節(jié)省流量及加快速度，UC 為用戶提供了無(wú)圖模式，在實(shí)際使用中存在頁(yè)面中的圖片是不可缺少的，例如驗(yàn)證碼，地圖等。通過強(qiáng)制圖片顯示的功能可以保證圖片顯示不受用戶的設(shè)置影響。

**注意：整頁(yè)圖片強(qiáng)制顯示僅對(duì)當(dāng)前頁(yè)面生效，對(duì)頁(yè)面內(nèi)的 frame/iframe 不生效，也不影響前進(jìn)后退的頁(yè)面

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

開啟應(yīng)用模式

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

應(yīng)用模式是為方便 Web 應(yīng)用及游戲開發(fā)者設(shè)置的綜合開關(guān)，通過meta標(biāo)簽進(jìn)行指示打開，當(dāng)進(jìn)入應(yīng)用模式時(shí)，瀏覽器將自動(dòng)調(diào)整以下參數(shù):

參數(shù)	狀態(tài)	說明
全屏	生效	可通過 `meta` 或 JS API 調(diào)用退出全屏
長(zhǎng)按菜單	失效	可通過 JS API 調(diào)用重新生效
瀏覽器默認(rèn)手勢(shì)	失效	可通過 JS API 調(diào)用重新生效
排版模式	標(biāo)準(zhǔn)模式	可通過 `meta` 或 JS API 調(diào)用設(shè)置其他排版模式
強(qiáng)制圖片顯示	生效	/
夜間模式	失效	可通過 `meta` 或 JS API 調(diào)用啟用夜間模式

縮放字體

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

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

Apple iOS原生瀏覽器

添加智能 App 廣告條

告訴瀏覽器這個(gè)網(wǎng)站對(duì)應(yīng)的app，并在頁(yè)面上顯示下載banner，需要注意的是Smart App Banners標(biāo)簽不能用在frame框架內(nèi)部，否則不起作用。

其中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://">

忽略數(shù)字自動(dòng)識(shí)別為電話號(hào)碼

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

啟用 WebApp 全屏模式

<meta name="apple-mobile-web-app-capable" content="yes">

添加到主屏后設(shè)置狀態(tài)欄的背景顏色

<meta name="apple-mobile-web-app-status-bar-style" content="black">

只有在 “apple-mobile-web-app-capable” content=”yes” 時(shí)生效。

如果設(shè)置為 default 或 black ，網(wǎng)頁(yè)內(nèi)容從狀態(tài)欄底部開始。
如果設(shè)置為 black-translucent ，網(wǎng)頁(yè)內(nèi)容充滿整個(gè)屏幕，頂部會(huì)被狀態(tài)欄遮擋。

添加到主屏后的標(biāo)題（iOS 6 新增）

<meta name="apple-mobile-web-app-title" content="App Title">

iOS 圖標(biāo)

圖片自動(dòng)處理成圓角和高光等效果。

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

禁止系統(tǒng)自動(dòng)添加效果，直接顯示設(shè)計(jì)原圖。

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

iOS 8+ 不再支持 precomposed, 只有 apple-touch-icon 是必須的
在大多數(shù)情況下，在head中一個(gè)180×180px的圖標(biāo)就足夠了。如果您想要由設(shè)備確定的唯一圖標(biāo)，請(qǐng)使用不同大小的圖標(biāo)。

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

啟動(dòng)畫面 ( 不贊成使用 )

iPad 的啟動(dòng)畫面是不包括狀態(tài)欄區(qū)域的，iPhone 和 iPod touch 的啟動(dòng)畫面是包含狀態(tài)欄區(qū)域的

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

iOS 應(yīng)用深度鏈接

<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原生瀏覽器

標(biāo)簽頁(yè)選項(xiàng)卡顏色

Android Lollipop 中的 Chrome 39 增加 theme-color meta 標(biāo)簽，用來控制選項(xiàng)卡顏色。

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

添加到主屏

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

安卓應(yīng)用深度鏈接（網(wǎng)頁(yè)上喚起應(yīng)用）

<!-- 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">

注：貌似沒測(cè)試成功，如果你知道如何正確設(shè)置，歡迎留言斧正。

Apple Safari 瀏覽器

Safari 10開始支持固定書簽頁(yè)的SVG favicons了，你可以這樣使用：

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

類似的效果

Google Chrome瀏覽器

關(guān)閉chrome瀏覽器下翻譯插件

有些時(shí)候感覺chrome瀏覽器下翻譯插件很煩人，可以通過下面的代碼禁用它。

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

chrome瀏覽器插件安裝

有時(shí)候，你需要在你的頁(yè)面上點(diǎn)擊某個(gè)安卓，直接安卓你的chrome瀏覽器插件，而不是鏈接到Chrome webstore 的詳細(xì)地址再安裝，那么你可以使用：

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

Google Chrome Mobile (只針對(duì) Android)

從 Chrome 31 開始，你可以設(shè)置你的 Web 應(yīng)用為“app mode”，如 Safari。

<!-- 鏈接到一個(gè) manifest 并定義 manifest 的元數(shù)據(jù)。-->
<!-- manifest.json 中的例子也可以通過以下鏈接找到。-->
<link rel="manifest" href="manifest.json">
 
<!-- 定義你的網(wǎng)頁(yè)為 Web 應(yīng)用 -->
<meta name="mobile-web-app-capable" content="yes">
 
<!-- 第一個(gè)是官方推薦格式。-->
<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瀏覽器

模式設(shè)置

//IE8以下以IE7標(biāo)準(zhǔn)模式呈現(xiàn)網(wǎng)頁(yè)，而IE9則以IE9的標(biāo)準(zhǔn)模式呈現(xiàn)網(wǎng)頁(yè)：
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
//如果安裝了GCF，則使用GCF來渲染頁(yè)面（"chrome=1"），
//如果沒有安裝GCF，則使用最高版本的IE內(nèi)核進(jìn)行渲染（"IE=edge"）
<meta http-equiv="x-ua-compatible" content="ie=edge">

win8,win10下的一些設(shè)置

<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./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:///browserconfig.xml">
<meta name="msapplication-allowDomainApiCalls" content="true">
<meta name="msapplication-allowDomainMetaTags" content="true">
<meta name="msapplication-badge" content="frequency=30; polling-uri=http:///id45453245/polling.xml">
<meta name="msapplication-navbutton-color" content="#FF3300">
<meta name="msapplication-notification" content="frequency=60;polling-uri=http:///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 磁貼圖標(biāo)
<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:///documentation">
<!-- More info: http:///documentation/ -->

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自： VoidOc > 《待分類》

舉報(bào)/認(rèn)領(lǐng)