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

標籤：mobile   orm   覆蓋   檔案   標籤   touch   source   狀態   none   

在移動端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頁面開發常用的頭部標籤設定