Meta標籤整理

html5基本標籤

聲明文檔使用的字符編碼：

<meta charset=「utf-8」 />

聲明文檔的兼容模式，優先使用最新版本 IE 和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/> //指示IE以目前可用的最高模式顯示內容

定義頁面的最新版本：

<meta name="revised" content="Frank, 2016/3/1" />

頁面描述

<meta name="description" content="不超過850個字符"/>

定義針對搜索引擎的關鍵詞：

<meta name="keywords" content="HTML5COL學院, HTML5, CSS3, JavaScript" />

定義網頁搜索引擎索引方式，使用英文逗號「,」分隔，常有以下幾種取值：none,noindex,nofollow,all,index和follow：

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

定義網頁做者：

<meta name="author" content="HTML5COL" />

每 8 秒刷新一次頁面：

<meta http-equiv="refresh" content="8" />

移動設備

手機瀏覽器是把頁面放在一個虛擬的「窗口」（viewport）中，一般這個虛擬的「窗口」（viewport）比屏幕寬，這樣就不用把每一個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的佈局），用戶能夠經過平移和縮放來看網頁的不一樣部分。移動版的Safari 瀏覽器最新引進了viewport 這個meta tag，讓網頁開發者來控制viewport 的大小和縮放，其餘手機瀏覽器也基本支持

使用initial-scale=1到非響應式網站上，這會讓網站以100%寬度渲染，用戶須要手動移動頁面或者縮放。若是和initial-scale=1同時使用user-scalable=no或maximum-scale=1，則用戶將不能放大/縮小網頁來看到所有的內容。

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>

參數：

1. width：寬度（數值/ device-width）（範圍從200到10,000，默認爲980像素）
2.height：高度（數值/ device-height）（範圍從223到10,000）
3.initial-scale：初始的縮放比例 （範圍從>0 到10）
4.minimum-scale：容許用戶縮放到的最小比例
5.maximum-scale：容許用戶縮放到的最大比例
6.user-scalable：用戶是否能夠手動縮 (no,yes) 

若是不顯示地設置viewport，那麼width的默認爲980。若是頁面的全部元素寬度都小於980，此時width爲980，若是頁面最寬的位置超過980，那麼width等於最大寬度。總之，默認能將整個頁面從左到右顯示出來

早期（現已廢棄target-densitydpi ）

對於ios設備，設置width能夠生效，但對於android，你能設置的是一個特殊的字段target-densitydpi（爲了防止Android Browser和WebView 根據不一樣屏幕的像素密度對你的頁面進行縮放），你能夠將viewport的target-densitydpi 設置爲 device-dpi。當你這麼作了，頁面將不會縮放。相反，頁面會根據當前屏幕的像素密度進行展現。

禁止跳轉至地圖。

<meta name=」format-detection」 content=」address=no」>

禁止數字識自動別爲電話號碼：

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

不識別郵箱：

<meta name="format-detection" content="email=no" />

也能夠寫成：

<meta name=「format-detection」 content=「telphone=no, email=no」/>

不讓百度轉碼

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

uc強制豎屏

<meta name=」screen-orientation」 content=」portrait」>

QQ強制豎屏

<meta name=」x5-orientation」 content=」portrait」>

UC強制全屏

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

QQ強制全屏

<meta name=」x5-fullscreen」 content=」true」>

ISO 設備

添加到主屏後的標題（iOS 6開始）：

<meta name="apple-mobile-web-app-title" content="標題" />

設置啓動畫面

<link rel=「apple-touch-startup-image」 href=「Startup.png」 />

是否啓用 WebApp 全屏模式,假裝app，離線應用。

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
當網站添加到主屏幕後再點擊進行啓動時，可隱藏地址欄（從瀏覽器跳轉或輸入連接進入並無此效果）

針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，好比黑莓

<meta name=」HandheldFriendly」 content=」true」>

設置web app的放置主屏幕上icon文件路徑

<link rel=」apple-touch-icon-precomposed」 href=」http://spion.blog.163.com/blog/iphone_milanoo.png」 />
。圖片尺寸能夠設定爲57*57（px）或者Retina能夠定爲114*114（px），ipad尺寸爲72*72（px）。

設置狀態欄的背景顏色：

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

注：只有在 "apple-mobile-web-app-capable" content="yes" 時生效
content 參數：
default 默認值，網頁內容從狀態欄底部開始 
black 狀態欄背景是黑色，網頁內容從狀態欄底部開始 
black-translucent 狀態欄背景是黑色半透明，網頁內容充滿整個屏幕，頂部會被狀態欄遮擋