移動端meta標籤設定

1.設定當前html檔案的字元編碼

<meta charset="UTF-8">

2設定瀏覽器的相容模式（讓IE使用最新的瀏覽器渲染）

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

3.視口（快捷鍵：meta:vp）

<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
 

• 作用：在移動瀏覽器中，當頁面寬度超出裝置，瀏覽器內部虛擬的一個頁面容器，將頁面容器縮放到裝置那麼大展示；
• 視口的寬度可以通過meta標籤設定；
• 此屬性為移動端頁面視口設定；
• width：視口的寬度，width=device-width：寬度是裝置的寬度
• initial-scale：初始化縮放，- initial-scale=1.0：不縮放
• user-scalable：是否允許使用者自行縮放，取值0或1，yes或no
• minimum-scale：最小縮放
• maximum-scale：最大縮放
• 一般設定了不允許縮放，就沒必要設定最大最小縮放了。

4.Cache-Control頭域

<meta
 
 http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>

• Cache-Control指定請求和響應遵循的快取機制。在請求訊息或響應訊息中設定Cache-Control並不會修改另一個訊息處理過程中的快取處理過程。請求時的快取指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached，響應訊息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各個訊息中的指令含義如下,
• no-cache指示請求或響應訊息不能快取
• no-store用於防止重要的資訊被無意的釋出。在請求訊息中傳送將使得請求和響應訊息都不使用快取
• must-revalidate：告訴瀏覽器、快取伺服器，本地副本過期前，可以使用本地副本；本地副本一旦過期，必須去源伺服器進行有效性校驗。

5.是用於設定禁止瀏覽器從本地機的快取中調閱頁面內容，設定後一旦離開網頁就無法從Cache中再調出

 <meta http-equiv="Pragma" content="no-cache"/>

6.禁止將頁面中的一連串數字識別為電話號碼、並設定為手機可以撥打的一個連線。

這個標籤的預設值是telephone=yes。

 <meta content="telephone=no" name="format-detection"/>

7.刪除預設的蘋果工具欄和選單欄

  <meta content="yes" name="apple-mobile-web-app-capable"/>

• 當我們需要顯示工具欄和選單欄時，這個行meta就不用加了，預設就是顯示。

8.控制狀態列顯示樣式

 <meta content="black" name="apple-mobile-web-app-status-bar-style"/>

• content設定狀態列顏色

9.條件註釋


<!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></script>
<![endif]-->

- html5shiv讓瀏覽器可以識別html5的新標籤；
- respond讓低版本瀏覽器可以使用CSS3的媒體查詢。