meta 標簽分兩大部分:HTTP 標題信息(http-equiv)和頁面描述信息(name)。
- 1、聲明文檔使用的字符編碼
<meta charset='utf-8'>
以下設置更為詳細:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- 2、聲明文檔的兼容模式
// 指示IE以目前可用的最高模式顯示內容
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=Emulate IE7" />
// 指示IE使用 <!DOCTYPE> 指令確定如何呈現內容。標準模式指令以IE7 標準模式顯示,而 Quirks 模式指令以 IE5 模式顯示
4、為移動設備添加 viewport
<meta name ="viewport" content ="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
/*
content 參數解釋:
width viewport 寬度(數值/device-width)
height viewport 高度(數值/device-height)
initial-scale 初始縮放比例
maximum-scale 最大縮放比例
minimum-scale 最小縮放比例
user-scalable 是否允許用戶縮放(yes/no)
minimal-ui IOS 7.1 beta 2 中新增屬性,可以在頁面加載時最小化上下狀態欄。這是一個布爾值,可以直接這樣寫:
*/
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
- 強制讓文檔與設備的寬度保持 1:1 ;
- 文檔最大的寬度比列是1.0( initial-scale 初始刻度值和 maximum-scale 最大刻度值);
- user-scalable 定義用戶是否可以手動縮放( no 為不縮放),使頁面固定設備上面的大小;