在移動端web頁面開發中，我們常需要設置各種頭部標簽以幫助瀏覽器更好的解析頁面，將頁面完美呈現，這里列出了工作中常用的各種頭部標簽，以備查詢。
viewport
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
initial-scale屬性控制頁面最初加載時的縮放等級。maximum-scale、minimum-scale及user-scalable屬性控制允許用戶以怎樣的方式放大或縮小頁面。
使用目的：阻止頁面縮放
Safari 無效，其他均能阻止頁面縮放
safari可以使用以下方法
window.onload = function() {
document.addEventListener('touchstart', function(event) {
if (event.touches.length > 1) {//多觸點
event.preventDefault();//阻止默認縮放
}
})
var lastTouchEnd = 0;
document.addEventListener('touchend', function(event) {
var now = (new Date()).getTime();
if (now - lastTouchEnd <= 300) {
event.preventDefault(); //阻止雙擊放大
}
lastTouchEnd = now;
}, false)
}
ios meta
<meta name="apple-mobile-web-app-capable" content="yes"/>
啟用 WebApp 全屏模式，刪除蘋果默認的工具欄和菜單欄
<meta name="apple-mobile-web-app-title" content="標題">
設置添加到主屏后的標題
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
在web app應用下狀態條（屏幕頂部條）的顏色，default（白色）black（黑色） black-translucent（灰色半透明）
若值為"black-translucent"將會占據頁面位置（會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕為40px）。
<meta name="format-detection" content="telphone=no, email=no"/>
忽略頁面中的數字識別為電話，忽略email識別
iOS 添加到主屏圖標
<link rel="apple-touch-icon" href="apple-touch-icon.png">
ios7以前系統默認會對圖標添加特效（圓角及高光），如果不希望系統添加特效，則可以用apple-touch-icon-precomposed.png代替apple-touch-icon.png
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-57x57-precomposed.png"/>
iPhone 和 iTouch，默認 57x57 像素，必須有
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-114x114-precomposed.png"/>
Retina iPhone 和 Retina iTouch，114x114 像素，可以沒有，但推薦有
圖標使用的優先級如下：
- 如果沒有跟相應設備推薦尺寸一致的圖標，會優先使用比推薦尺寸大，但最接近推薦尺寸的圖標。
- 如果沒有比推薦尺寸大的圖標，會優先選擇最接近推薦尺寸的圖標。
iOS 啟動畫面
iPhone
<link rel="apple-touch-startup-image" media="(device-width: 320px)" href="apple-touch-startup-image-320x460.png" />
iPhone Retina
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
iPhone 5
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">
iPad portrait
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />
iPad landscape
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />
iPad Retina portrait
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
iPad Retina landscape
<link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />
其他
<link rel="dns-prefetch" href="//api.m.taobao.com">
DNS預解析
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
添加 favicon icon
<meta name="renderer" content="webkit">
啟用360瀏覽器的極速模式(webkit)
<meta http-equiv="X-UA-Compatible" content="IE=edge">
IE使用現有最高版本
<meta http-equiv="Cache-Control" content="no-siteapp" />
不讓百度轉碼
<meta name="x5-orientation" content="portrait">
QQ強制豎屏
<meta name="x5-fullscreen" content="true">
QQ強制全屏
<meta name="x5-page-mode" content="app">
QQ應用模式
<meta name="screen-orientation" content="portrait">
UC強制豎屏
<meta name="full-screen" content="yes">
UC強制全屏
<meta name="browsermode" content="application">
UC應用模式
<meta name="msapplication-tap-highlight" content="no">
windows phone 點擊無高光
<meta name="robots" content="index,follow"/>
搜索引擎抓取
說明：
robots用來告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引。
具體參數如下：
信息參數為all：文件將被檢索，且頁面上的鏈接可以被查詢；
信息參數為none：文件將不被檢索，且頁面上的鏈接不可以被查詢；
信息參數為index：文件將被檢索；
信息參數為follow：頁面上的鏈接可以被查詢；
信息參數為noindex：文件將不被檢索，但頁面上的鏈接可以被查詢；
信息參數為nofollow：文件將被檢索，但頁面上的鏈接不可以被查詢；
參考文章
HTML meta標簽總結,HTML5 head meta屬性整理
Safari Web Content Guide
Safari HTML Reference