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

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