前端經常使用的一些meta屬性

頁面字符編碼：

<meta charset="utf-8">
複製代碼

用來告知瀏覽器如何解碼當前頁面。

瀏覽器模式切換：

<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<!-- 相關例子——模擬IE7渲染模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=7">

<!-- 啓用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
複製代碼

1.讓IE瀏覽器使用最新的渲染模式，也能夠模擬谷歌內核渲染模式。 第二個代碼表明的是讓瀏覽器模擬IE7內核的渲染模式，增長chrome將會啓用本機上的GCF，這個插件可讓瀏覽器模擬谷歌內核，但前提是有安裝谷歌內嵌框架（Google Chrome Frame）,這樣能達到就算是在IE瀏覽器下都能使用谷歌內核來解釋頁面。 （該標籤IE8以上才支持）

2.對於360瀏覽器來講，它擁有兩個內核，一個是本機的IE內核，另外一個則是谷歌的內核（webkit），好比您的電腦上安裝的是IE7，那麼這個IE內核就是IE7。

360瀏覽器經過兩種模式的狀況來使用不一樣的內核，兼容模式對應的是IE內核，極速模式則對應的是webkit。若是本機上有安裝360瀏覽器的朋友，不妨能夠試試看在不一樣模式下網頁顯示的區別。

固然這個不僅屬於360瀏覽器，國內有不少多核瀏覽器都可以使用這個標籤，國內雙核瀏覽器默認內核模式以下：

搜狗高速瀏覽器、QQ瀏覽器：IE內核（兼容模式）
360極速瀏覽器、遨遊瀏覽器：Webkit內核（極速模式）
複製代碼

能夠根據須要來使用該標籤，達到較好的效果

SEO相關的聲明：

使用以下的代碼能夠聲明關於當前頁面的一些關鍵字，以及頁面描述，能爲搜索引擎提供有用的信息。

<meta name="keywords" content="">
<meta name="description" content="">
複製代碼

VIEWPORT使用：

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
複製代碼

這裏的代碼用於將頁面以屏幕的寬度進行渲染，將佈局視口等同於屏幕的寬度，從而不會出現網頁在移動端上會縮小的問題，同時不容許用戶縮放。 詳情能夠看看個人另外一篇文章：

聊聊viewport那些事兒

去除IOS Safari對數字號碼的自動識別：

在IOS Safari中數字會被直接處理爲電話連接，但在具體的業務場景中，咱們不須要有這類功能，這時候能夠利用如下的代碼：

關閉電話自動識別:

<meta name="format-detection" content="telephone=no"/>
複製代碼

固然也能夠根據業務須要，自主開啓電話識別的功能，使用代碼以下：

開啓撥打電話/發送短信功能:

<a href="tel:123456">當即撥打電話</a>
<a href="sms:123456">當即發送短信</a>
複製代碼

使用以上代碼，就可以作到發送短信以及撥打電話的功能

去除IOS Safari對郵箱地址的自動識別：

若是想要在去除電話的識別的基礎上，同時去除郵箱地址識別：

<meta name="format-detection" content="telephone=no,email=no"/>
複製代碼

郵箱連接

<a href="mailto:XXXXXX@qq.com">給咱們發郵件</a>
複製代碼

X5內核相關Meta設置：

X5內核，即QQ瀏覽器使用的內核，包括如今的微信上瀏覽的頁面也使用這個內核。 如下的代碼僅在X5內核之下有效，可是微信網頁上彷佛也沒有任何做用。

<meta name="x5-orientation" content="portrait|landscape"/> //設置屏幕方向 
<meta name="x5-fullscreen" content="true"/> //設置全屏
複製代碼

第一段代碼可讓頁面堅持以一個屏幕方向進行顯示

第二段代碼讓網頁處於全屏的狀態下去顯示，這意味着狀態欄以及地址欄會看不到。

UC瀏覽器相關Meta設置：

UC瀏覽器跟QQ瀏覽器同樣有強制全屏和強制橫/豎屏顯示的設置。

<meta name="full-screen" content="yes">
<meta name="screen-orientation" content="portrait">
複製代碼