你對 Meta 標籤瞭解多少?

 

小夥伴,在我們日常寫網頁的時候有沒有注意過Meta 標籤,你對它瞭解多少呢?Meta標籤是HTML語言head區的一個輔助性標籤,它位於HTML文檔頭部的head標記和title標記之間,它提供用戶不可見的信息。它可用於瀏覽器(如何顯示內容或重新加載頁面),搜索引擎(關鍵詞),或其他web服務。

今天給大家分享一下關於Meta 標籤的常見功能分別由 移動端  PC 端的:

meta

1、申請文檔使用的字符編碼

<meta charset='utf-8'>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

該 meta 標籤定義了 HTML 頁面所使用的字符集爲 utf-8 ,就是萬國碼。它可以在同一頁面顯示中文簡體、繁體及其它語言(如日文,韓文)等。當然,你也可以使用gb2312(簡體中文),big5(繁體中文)等等其他字符集。

而目前我們一般推薦使用第一種寫法,也是HTML5使用的寫法。

2、聲明使用的瀏覽器及版本

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

當指定的content值爲IE=edge,chrome=1時,優先使用 IE 最新版本和 Chrome。假定客戶端安裝了Google Chrome Frame,則在IE中使用chrome的渲染引擎來渲染頁面,否則,將會使用客戶端IE最高的標準模式對頁面進行渲染。

還有以下幾種設置方式:

 <meta http-equiv="X-UA-Compatible" content="IE=6" /><!-- 使用IE6 -->  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><!-- 使用IE7 -->  <meta http-equiv="X-UA-Compatible" content="IE=8" /><!-- 使用IE8 -->  <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!--指示IE以目前可用的最高模式顯示內容-->

3、SEO優化相關

頁面描述,每個網頁都應有一個不超過 150 個字符且能準確反映網頁內容的描述標籤。

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

頁面關鍵詞,每個網頁應具有描述該網頁內容的一組唯一的關鍵字。

使用人們可能會搜索,並準確描述網頁上所提供信息的描述性和代表性關鍵字及短語。

<meta name="keywords" content="html5, css3, 關鍵字"/>

定義網頁作者,非必要

<meta name="author" content="月光光" />

4、頁面重定向和刷新:content內的數字代表時間(秒),既多少時間後刷新。如果加url,則會重定向到指定網頁。

<meta http-equiv="Refresh"  contect="5;url=http://www.helloweba.com" />

上述代碼表示停留5秒鐘後自動刷新跳轉到URL網址http://www.helloweba.com。

5、Expires網頁過期時間

<meta http-equiv="Expires" contect="Mon,12 May 2016 00:20:00 GMT" />

設定網頁的到期時間,一旦過期則必須到服務器上重新調用,需要注意的是必須使用GMT時間格式,或直接設爲0(不緩存)。

6、Pragma禁止本地緩存

<meta http-equiv="Pragma" contect="no-cache" />

設定網頁不保存在緩存中,每次訪問都刷新頁面。這樣設定,訪問者將無法脫機瀏覽。

7、viewport移動設備屏幕可視區域

由於移動設備屏幕寬度不同於傳統 web,因此我們需要改變 viewport 值。

大部分4.7-5寸設備的viewport寬設爲360px;5.5寸設備設爲400px;iphone6設爲375px;ipone6 plus設爲414px。

  • width – viewport 的寬度 (範圍從 200 到 10,000,默認爲 980 像素)

  • height – viewport 的高度 (範圍從 223 到 10,000 )

  • initial-scale – 初始的縮放比例 (範圍從 > 0 到 10)

  • minimum-scale – 允許用戶縮放到的最小比例

  • maximum-scale – 允許用戶縮放到的最大比例

  • user-scalable – 用戶是否可以手動縮放 (no,yes)

<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 爲不縮放),使頁面固定設備上面的大小;

注意:實際測試中發現,有些安卓系統自帶的瀏覽器並不支持這一條規則,能夠對頁面進行放大,一旦放大響應的 box 也隨之放大,導致頁面出現錯亂問題,解決方法:定義頁面的最小寬度。

body { 
    min-width: 320px; 
 }

注意,很多人使用initial-scale=1到非響應式網站上,這會讓網站以100%寬度渲染,用戶需要手動移動頁面或者縮放。如果和initial-scale=1同時使用user-scalable=no或maximum-scale=1,則用戶將不能放大/縮小網頁來看到全部的內容。

對於移動設備上的meta還有以下一些設置。

8、WebApp全屏模式:僞裝app,離線應用。

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

9、隱藏狀態欄/設置狀態欄顏色:只有在開啓WebApp全屏模式時才生效。content的值爲default | black | black-translucent 。

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

10、添加到主屏後的標題

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

11、忽略數字自動識別爲電話號碼

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

12、忽略識別郵箱

<meta content="email=no" name="format-detection" />

今天就分享到這裏,祝小夥伴們學習愉快!也謝謝大家對小月博客的關注。

 

========================================================

http://www.aliyue.net

WEB

========================================================


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章