移動前端第二彈：善用meta

前言

在移動前端第一彈：viewport詳解中，咱們講了viewport，那是一個關於meta的故事。此次咱們會就將meta這個故事講得更廣闊、更有意思一些。

寫過HTML的童鞋，應該都對這個不陌生，或用它來定義頁面編碼，或用它來定義搜索引擎抓取方式，或用它定義頁面關鍵字，描述等等。

meta列表

好的meta使用，能更好地提升頁面的可用性及被檢索的概率。

這裏並不會列出全部的meta使用方式，只挑選一些經常使用及實際意義比較大的講講，固然也包括一些廠商私有定製的。

常規

聲明文檔使用的字符編碼

1	<meta charset="utf-8" />

該聲明用來指定文檔的編碼，除了utf-8，可選值還有：ISO-8859-一、BIG五、iso-8859-2, iso-2022-jp, iso-2022-kr, gb2312等

固然，你可能還見過使用另一種方式來定義文檔字符編碼：

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

 

相對於這種方式，更推薦你使用第1種，言外之意，就是推薦使用HTML5。

聲明頁面刷新或跳轉

1 2	<meta http-equiv="refresh" content="10" /> <meta http-equiv="refresh" content="10; url=http://www.doyoe.com" />

該聲明用來指定頁面自刷新或者跳轉到其它頁面，其中的時間單位是s。

聲明頁面過時時間

1 2	<meta http-equiv="expires" content="0" /> <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT" />

該聲明用來指定頁面的過時時間，一旦網頁過時，從服務器上從新請求，其中時間必須使用GMT格式，或者直接是0（即不緩存）

聲明頁面是否緩存

1 2	<meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="cache-control" content="no-cache" />

上述語句均可以用來指定文檔不被緩存。一些仍然在使用HTTP/1.0的可使用第1條，第2條由HTTP/1.1提供，經常使用值還有：public, no-cache, no-store等

聲明做者信息

1	<meta name="author" content="joy, dooyoe@gmail.com" />

聲明文檔關鍵字

1	<meta name="keywords" content="CSS, HTML, JavaScript, 前端" />

多關鍵字之間以半角逗號分隔

聲明文檔描述

1	<meta name="description" content="這是一份meta列表" />

文檔描述內容最好是完整的一句話，以不超過50個字符爲宜

聲明使用的瀏覽器及版本

x-ua-compatible設置是從IE8開始增長的（很明顯，只適用於IE），對於過往的版本沒法識別。
開發者能夠經過設置x-ua-compatible來指定渲染引擎的類型和版本，而且由於需求不一樣能夠有多種不一樣的設置：

Case1:

1 2 3 4

<meta http-equiv="x-ua-compatible" content="IE=7" /> <meta http-equiv="x-ua-compatible" content="IE=4" /> <meta http-equiv="x-ua-compatible" content="IE=xx" /> <meta http-equiv="x-ua-compatible" content="IE=50" />

當直接指定content爲IE的某個具體版本，如上述代碼第1條，客戶端的IE將會使用IE7.0標準模式對頁面進行渲染，並忽略Doctype定義。
當指定的IE版本在客戶端IE中不存在時，IE將會嘗試將該值轉換爲最爲接近的版本。
例如指定一個錯誤的或者低於5.0的IE版本，如上述代碼第2，3條，客戶端的IE將會使用IE5.0對頁面進行渲染，因爲IE5.0並無標準模式，因此將會直接使用quirks mode來渲染；
若是指定一個大於客戶端IE的版本，如上述代碼第4條，假定客戶端IE的最高版本爲9.0，那麼IE會將該值轉換爲IE=9，即便用IE9.0標準模式對頁面進行渲染。

Case2:

1	<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" />

當指定的content值加了Emulate前綴時，如上述代碼，客戶端IE將會根據Doctype定義來決定如何來對頁面進行渲染。假設頁面使用了標準的Doctype，那麼此定義效果等同Case1；假設頁面並無使用標準的Doctype，那麼將使用quirks mode來渲染。

Case3:

1	<meta http-equiv="x-ua-compatible" content="IE=Edge" />

當指定的content值爲IE=Edge時，如上述代碼，客戶端的IE將會使用最高的標準模式對頁面進行渲染。

Case4:

1	<meta http-equiv="x-ua-compatible" content="IE=7, 10, 11" />

當指定的content值有多個版本時，如上述代碼，假定客戶端IE版本爲8.0或者9.0，則使用IE7.0標準模式對頁面進行渲染；假定客戶端IE版本爲10.0或者11.0，則直接使用對應版本的標準模式對頁面進行渲染。

Case5:

1	<meta http-equiv="x-ua-compatible" content="IE=Edge, chrome=1" />

當指定的content值爲IE=Edge, chrome=1時，如上述代碼，假定客戶端安裝了Google Chrome Frame，則在IE中使用chrome的渲染引擎來渲染頁面，不然，將會使用客戶端IE最高的標準模式對頁面進行渲染。

聲明搜索引擎抓取方式

1	<meta name="robots" content="index" />

通知搜索引擎文檔是否須要被索引。可選值有：

• all（默認值，索引當前頁並跟蹤連接，至關於：index, follow）
• none（忽略當前頁，至關於：noindex, nofollow）
• index（索引當前頁）
• noindex（不索引當前頁）
• follow（跟蹤當前頁連接，不論當前頁是否被索引）
• nofollow（不跟蹤當前頁連接，不論當前頁是否被索引）

若是聲明衝突，某些引擎可能會作嚴格處理：

1 2	<meta name="robots" content="noindex" /> <meta name="robots" content="index" />

 

相似上述代碼，在Google引擎中，會執行noindex這個更爲嚴格的聲明。

須要注意的是並非全部搜索引擎都支持robots meta，比較保守的作法是配合robots.txt使用。

聲明搜索引擎抓取間隔

1	<meta name="revisit-after" content="10 days" />

有時候你可能並不但願站點一直被搜索引擎抓取，而是每間隔一段時間纔來訪問一次，這時，能夠聲明revisit-after meta。

移動

聲明viewport視口

1	<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

該聲明用於指定在移動設備上頁面的佈局視口如何設置。對於viewport meta的詳細設置，請參考：移動前端第一彈：viewport詳解

聲明添加到主屏幕的Web App標題

iOS Safari容許用戶將一個網頁添加到主屏幕而後像App同樣來操做它。咱們知道每一個App下方都會有一個名字，iOS Safari提供了一個私有的meta來定義這個名字，代碼以下：

1	<meta name="apple-mobile-web-app-title" content="Web App名稱" />

 

Android Chrome31.0，Android Browser5.0也開始支持添加到主屏幕了，但並無提供相應的定義標題的方式，因此若是你想統一iOS和Android平臺定義Web app名稱的方式，可使用title標籤來定義，代碼以下：

1	<title>Web App名稱</title>

 

但若是你想要網頁標題和App名字不同的話，那就只有iOS才行。

聲明添加到主屏幕時隱藏地址欄和狀態欄（即全屏）

當咱們將一個網頁添加到主屏幕時，會更但願它能有像App同樣的表現，沒有地址欄和狀態欄全屏顯示，代碼以下：

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

 

該方案在 iOS 和 Android5.0+ 上都通用。

聲明添加到主屏幕時設置系統頂欄顏色

當咱們將一個網頁添加到主屏幕時，還能夠對 系統顯示手機信號、時間、電池的頂部狀態欄 顏色進行設置，前提是開啓了：

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

 

有了這個前提，你能夠經過下面的方式來進行定義：

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

 

content只有3個固定值可選：default | black | black-translucent

• 若是設置爲 default，狀態欄將爲正常的，即白色，網頁從狀態欄如下開始顯示；
• 若是設置爲 black，狀態欄將爲黑色，網頁從狀態欄如下開始顯示；
• 若是設置爲 black-translucent，狀態欄將爲灰色半透明，網頁將充滿整個屏幕，狀態欄會蓋在網頁之上；

該設置只在 iOS 上有效。

電話號碼識別

在 iOS Safari （其餘瀏覽器和Android均不會）上會對那些看起來像是電話號碼的數字處理爲電話連接，好比：

• 7位數字，形如：1234567
• 帶括號及加號的數字，形如：(+86)123456789
• 雙鏈接線的數字，形如：00-00-00111
• 11位數字，形如：13800138000

可能還有其餘類型的數字也會被識別，但在具體的業務場景中，有些時候這是沒必要須的，因此你能夠關閉電話自動識別，而後在須要撥號的地方，開啓電話呼出和短信功能。

1. 關閉電話號碼識別：

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

2. 開啓撥打電話功能：

   1	<a href="tel:123456">123456</a>

3. 開啓發送短信功能：

   1	<a href="sms:123456">123456</a>

郵箱地址識別

在 Android （iOS不會）上，瀏覽器會自動識別看起來像郵箱地址的字符串，不論有你沒有加上郵箱連接，當你在這個字符串上長按，會彈出發郵件的提示。

1. 關閉郵箱地址識別：

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

2. 開啓郵件發送：

   1	<a href="mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>

3. 若是想同時關閉電話和郵箱識別，能夠把它們寫到一條 meta 內，代碼以下：

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

附註

部分meta定義來自於trip