前端常用的一些meta屬性

法令男發表於2018-03-01

頁面字元編碼:

<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">
複製程式碼

相關文章