標籤在移動端的應用

<meta>標籤在移動端的應用

---

1. x-ua-compatible的使用

1.1 IE黑歷史

爲對以前開發的網頁進行支持，IE6容許網頁開發人員選擇IE編譯和顯示網頁的方式。
經過設置恰當的<!DOCTYPE>, 開發人員能夠設置IE的"Quirks Mode"或者"Standards Mode"。
IE8引入了文件兼容性的概念,使用戶可以選擇特定的IE版本編譯和顯示網頁。

1.2 IE的文件兼容性模式

• Emulate IE8 mode, 指示IE使用<!DOCTYPE>指令來決定如何編譯內容, Standards Mode使用IE8 Standards Mode, Quirks Mode使用IE5 Quirks Mode

• Emulate IE7 mode, 指示IE使用<!DOCTYPE>指令來決定如何編譯內容, Standards Mode使用IE87 Standards Mode, Quirks Mode使用IE5 Quirks Mode

• IE5 mode, 編譯內容如同IE7的quirks mode之顯示情況，和IE5中顯示的很是相似。

• IE7 mode, 編譯內容如同IE7的standards mode之顯示情況，不管網頁是否含有<!DOCTYPE>指令。

• IE8 mode, 支持CSS2.1, Selectors API並支持部分CSS3的功能

• Edge mode, 指示IE以目前可用的最高模式顯示內容

1.3 使用meta標籤指定文件兼容性模式

• x-ua-compatible頭標籤沒有大小寫之分。可是除 title 和其餘的meta標籤以外，它必須在<header>其餘元素前使用

• IE只會使用第一個x-ua-compatible頭

• 指定IE瀏覽器文檔模式

<meta http-equiv="x-ua-compatible" content="IE=EmulateIE9" >
 <meta http-equiv="x-ua-compatible" content="IE=EmulateIE8" >
 <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" >
 <meta http-equiv="x-ua-compatible" content="IE=9" >
 <meta http-equiv="x-ua-compatible" content="IE=8" >
 <meta http-equiv="x-ua-compatible" content="IE=7" >
 <meta http-equiv="x-ua-compatible" content="IE=edge" >

• 多個模式的指定
  若是一個特定版本的IE支持所要求的兼容性模式多於一種，將採用列於標頭內容屬性中最高的可用模式。你能夠使用這個特性來排除特定的兼容性模式，雖然並不推薦這樣作。舉例來講，下列標頭即會排除IE7 mode。

<meta http-equiv="X-UA-Compatible" content="IE=5; IE=8" />

1.4 使用Google Chrome Frame渲染

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

若是安裝了GCF，則使用GCF來渲染頁面，若是沒安裝GCF，則使用最高版本的IE內核進行渲染。Google Chrome Frame（谷歌內嵌瀏覽器框架GCF）。這個插件可讓用戶的IE瀏覽器外觀不變，但用戶在瀏覽網頁時，實際上使用的是Google Chrome瀏覽器內核，並且支持IE六、七、8等多個版本的IE瀏覽器。

2. meta viewport標籤的使用

2.1 meta viewport標籤能夠使用的屬性

meta viewport標籤首先是由蘋果公司在其safari瀏覽器中引入的，目的是解決移動設備的viewport問題。後來安卓和各大廠商也紛紛效仿，引入了對meta viewport的支持。
在蘋果的規範中，meta viewport標籤有6個屬性。

• width 設置layout viewport的寬度, 爲一個正整數, 或字符串'device-width'

• initial-scale 設置頁面的初始縮放值, 爲一個數字, 能夠帶小數

• maximum-scale 設置容許用戶的最大縮放值, 爲一個數字, 能夠帶小數

• minimum-scale 設置容許用戶的最小縮放值, 爲一個數字, 能夠爲小數

• height 設置layout viewport的高度

• user-scalable 是否容許用戶進行縮放, 值爲"no"或者"yes"

這些屬性能夠同時使用，也能夠單獨使用或者混用， 多個屬性同時使用時用逗號隔開
此外，在安卓中還支持target-densitydpi這個私有屬性，它表示目標設備的密度等級，做用時決定css中的1px表明多少物理像素(devicePixelRatio)。

• target-densitydpi 值能夠爲一個數字或者high-dpi, medium-dpi, low-dpi, device-dpi幾個字符串中的一個

當target-densitydpi=device-dpi時，css中的1px等於設備物理像素的1px。

2.2 如何將當前的viewport寬度設置爲ideal viewport的寬度

• 將width設置device-width
  因爲meta viewport標籤中的width能控制layout viewport的寬度，因此將width設置爲device-width可以將viewport寬度設置爲ideal viewport的寬度

<meta name="viewport" content="width=device-width">

在ipad和iphone上，不管是橫屏仍是豎屏，寬度都是豎屏時ideal viewport寬度的值。

• 將initial-scale設置爲1.0
  縮放是相對於ideal viewport來縮放的，當縮放值爲1時，天然獲得ideal viewport的寬度

<meta name="viewport" content="initial-scale=1.0">

在windows phone的IE上，不管是橫屏仍是豎屏，寬度都是豎屏時ideal viewport寬度的值

• 同時設置width與initial-scale
  在同時設置width與initial-scale時，瀏覽器會取其中較大的寬度做爲其ideal viewport的寬度

<meta name="viewport" content="width=device-width,initial-scale=1.0">

2.3 縮放以及initial-scale的默認值

公式

visual viewport寬度 = ideal viewpot寬度 / 當前縮放值 
當前縮放值 = ideal viewport寬度 / visual viewport寬度

在iphone與ipad上，不管給viewport設置的width是多少，若是沒有指定默認的縮放值，那麼iphone和ipad或自動給計算這個縮放值，以達到當前頁面不會出現橫向滾動條（或者說viewport的寬度就是屏幕的寬度）的目的