H5頁面中meta瞭解

1）<meta charset="UTF-8">

解釋：「utf-8」是一種字符編碼。charset=」utf-8」是告知瀏覽器此頁面屬於什麼字符編碼格式，下一步瀏覽器作好「翻譯」工做。常見的字符編碼有：gb23十二、gbk、unicode、utf-8。

各個字符編碼含義： 
gb2312：表明國家標準第2312條，其中是不包含繁體的（雖然我們不怎麼使用繁體了，可是臺灣還在使用繁體啊。那怎麼辦呢？）。 
gbk：國家標準擴展版（增長了繁體，包含全部亞洲字符集）。 
unicode：萬國碼（字面意思你也懂的）。 
**utf-8：**unicode的升級版。

 

---

 

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

解釋：是IE8的專用標記,用來指定IE8瀏覽器去模擬某個特定版本的IE瀏覽器的渲染方式(好比人見人煩的IE6)，以此來解決部分兼容問題，例如模擬IE7的具體方式以下：

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

「chrome=1」是什麼？

          Google Chrome Frame(谷歌內嵌瀏覽器框架GCF)。這個插件可讓用戶的IE瀏覽器外不變，但用戶在瀏覽網頁時，實際上使用的是Google Chrome瀏覽器內核，並且支持IE六、七、8等多個版本的IE瀏覽器

具體用法：

    < meta http-equiv = "X-UA-Compatible" content = "chrome=1" >---------------用以聲明當前頁面用chrome內核來渲染。

   < meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />----------------若是安裝了GCF，則使用GCF來渲染頁面，若是爲安裝GCF，則使用最高版本的IE內核進行渲染

 

---

 

 

3）<meta name="renderer" content="webkit">

解釋：國內的主流瀏覽器都是雙核瀏覽器：基於Webkit內核用於經常使用網站的高速瀏覽。基於IE的內核用於兼容網銀、舊版網站；

爲了解決上述問題，產生內核控制Meta標籤。只要你在本身的網站裏增長一個Meta標籤，告訴360瀏覽器這個網址應該用哪一個內核渲染，哪麼360瀏覽器就會在讀取到這個標籤後，當即切換對應的內核。並將這個行爲應用於這個二級域名下全部網址。

content 的取值爲webkit（webkit內核） |  ie-comp （IE兼容內核） | ie-stand之一（IE標準內核）；

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

content 屬性值：

       a）width:可視區域的寬度，值可爲數字或關鍵詞device-width;

       b）height :同height

       c）intial-scale:頁面首次被顯示的可視區域縮放級別，取值1.0則頁面按實際尺寸顯示，無任何縮放；

       d）maximum-scale=1.0,minimum-scale =1.0 ;可視區域的縮放級別

       e）user-scalable：是否可對頁面進行縮放；no爲禁止縮放

詳細介紹viewport概念：

       移動設備上的viewport就是設備的屏幕上能用來顯示咱們的網頁的那一塊區域，在具體一點，就是瀏覽器上(也多是一個app中的webview)用來顯示網頁的那部分區域，但viewport又不侷限於瀏覽器可視區域的大小，它可能比瀏覽器的可視區域要大，也可能比瀏覽器的可視區域要小。

 

來自於： https://www.quirksmode.org/mobile/viewports.html

、移動設備上有3個viewport:

     a） layout viewport 經過document.documentElement.clientWidth獲取

     b）visual viewport 經過window.innerWidth

---

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

解釋：是否須要顯示蘋果的工具欄和菜單欄

 網站開啓對web app程序的支持，其實意思就是刪除默認的蘋果工具欄和菜單欄，開啓全屏顯示

---

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

解釋：控制狀態欄顯示樣式

content取值

       ①  black 

        ② black-translucent

---

 

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

 解釋：對html中格式檢測，例如： 

- meta name=」format-detection」 content=」telephone=no」 ---- 是否設置自動將你的數字轉化爲撥號鏈接（默認爲yes）
- meta name=」format-detection」 content=」email=no」 -----設備是否識別郵箱，點擊以後自動發送 （默認爲yes）
- meta name=」format-detection」 content=」adress=no」------點擊後是否跳轉至地圖（默認爲yes）

---

 

7）<meta name="screen-orientation" content="portrait">---------UC強制豎屏

    <meta name="x5-orientation" content="portrait">------------QQ強制豎屏

    <meta name="description" content="不超過150個字符"/>-----------頁面描述

    <meta name="keywords" content=""/>-------頁面關鍵詞

    <meta name="robots" content="index,follow"/>---------搜索引擎抓取

    <meta http-equiv="Cache-Control" content="no-siteapp" />-----------不讓百度轉碼

    <meta name="full-screen" content="yes">----------UC強制全屏

    <meta name="x5-fullscreen" content="true">-------QQ強制全屏

 

8）設置啓動畫面

當用戶點擊主屏圖標打開 WebApp 時，系統會展現啓動畫面，在未設置狀況下系統會默認顯示該網站的首頁截圖，固然這個體驗不是很好，因此咱們須要經過如下代碼來自定義啓動畫面

    <link rel="apple-touch-startup-image" href="Startup.png" />