一些常用的meta标簽及其作用

聲明文檔使用的字元編碼 

<meta charset='utf-8'>

優先使用 IE 最新版本和 Chrome 

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

<meta name="wap-font-scale" content="no">

頁面描述 

<meta name="description" content="不超過150個字元"/>

頁面關鍵詞 

<meta name="keywords" content=""/>

 網頁作者 

<meta name="author" content="name, [email protected]"/>

搜尋引擎抓取 

<meta name="robots" content="index,follow"/>

移動端

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

<!-- viewport的content取值 -->

<!-- width：寬度（數值 / device-width）（200~10000，預設為980px） -->

<!-- height：高度（數值 / device-height）（223~10000） -->

<!-- initial-scale：初始縮放比例 （0~10） -->

<!-- minimum-scale：允許使用者縮放到的最小比例 -->

<!-- maximum-scale：允許使用者縮放到的最大比例 -->

<!-- user-scalable：是否允許使用者縮放 (no/yes)  -->

 uc強制豎屏 

<meta name="screen-orientation" content="portrait">

QQ強制豎屏 

<meta name="x5-orientation" content="portrait">

UC強制全屏 

<meta name="full-screen" content="yes">

QQ強制全屏 

<meta name="x5-fullscreen" content="true">

 UC應用模式 

<meta name="browsermode" content="application">

QQ應用模式 

<meta name="x5-page-mode" content="app">

IOS啟用 WebApp 全屏模式 

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

 IOS全屏模式下隐藏狀态欄/設定狀态欄顔色 content的值為default | black | black-translucent 

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

IOS添加到主屏後的标題 

<meta name="apple-mobile-web-app-title" content="标題">