在移動端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

移動端web頁面開發常用的頭部標簽設置