移動前端第二彈：善用meta

發表於2016-04-19
前端

前言

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

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

meta列表

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

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

 

常規

宣告文件使用的字元編碼

該宣告用來指定文件的編碼，除了utf-8，可選值還有：ISO-8859-1、BIG5、iso-8859-2, iso-2022-jp, iso-2022-kr, gb2312等

當然，你可能還見過使用另外一種方式來定義文件字元編碼：

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

宣告頁面重新整理或跳轉

該宣告用來指定頁面自重新整理或者跳轉到其它頁面，其中的時間單位是s。

宣告頁面過期時間

該宣告用來指定頁面的過期時間，一旦網頁過期，從伺服器上重新請求，其中時間必須使用GMT格式，或者直接是0（即不快取）

宣告頁面是否快取

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

宣告作者資訊

宣告文件關鍵字

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

宣告文件描述

文件描述內容最好是完整的一句話，以不超過50個字元為宜

宣告使用的瀏覽器及版本

x-ua-compatible設定是從IE8開始增加的（很明顯，只適用於IE），對於過往的版本無法識別。
開發者可以通過設定x-ua-compatible來指定渲染引擎的型別和版本，並且因為需求不同可以有多種不同的設定：

Case1:

當直接指定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:

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

Case3:

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

Case4:

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

Case5:

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

宣告搜尋引擎抓取方式

 

通知搜尋引擎文件是否需要被索引。可選值有：

  • all（預設值，索引當前頁並跟蹤連結，相當於：index, follow）
  • none（忽略當前頁，相當於：noindex, nofollow）
  • index（索引當前頁）
  • noindex（不索引當前頁）
  • follow（跟蹤當前頁連結，不論當前頁是否被索引）
  • nofollow（不跟蹤當前頁連結，不論當前頁是否被索引）

如果宣告衝突，某些引擎可能會做嚴格處理：

類似上述程式碼，在Google引擎中，會執行noindex這個更為嚴格的宣告。

需要注意的是並不是所有搜尋引擎都支援robots meta，比較保守的做法是配合robots.txt使用。

宣告搜尋引擎抓取間隔

有時候你可能並不希望站點一直被搜尋引擎抓取，而是每間隔一段時間才來訪問一次，這時，可以宣告revisit-after meta。

移動

宣告viewport視口

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

宣告新增到主螢幕的Web App標題

iOS Safari允許使用者將一個網頁新增到主螢幕然後像App一樣來操作它。我們知道每個App下方都會有一個名字，iOS Safari提供了一個私有的meta來定義這個名字，程式碼如下：

Android Chrome31.0，Android Browser5.0也開始支援新增到主螢幕了，但並沒有提供相應的定義標題的方式，所以如果你想統一iOS和Android平臺定義Web app名稱的方式，可以使用title標籤來定義，程式碼如下：

但如果你想要網頁標題和App名字不一樣的話，那就只有iOS才行。

宣告新增到主螢幕時隱藏位址列和狀態列（即全屏）

當我們將一個網頁新增到主螢幕時，會更希望它能有像App一樣的表現，沒有位址列和狀態列全屏顯示，程式碼如下：

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

宣告新增到主螢幕時設定系統頂欄顏色

當我們將一個網頁新增到主螢幕時，還可以對 系統顯示手機訊號、時間、電池的頂部狀態列 顏色進行設定，前提是開啟了：

有了這個前提，你可以通過下面的方式來進行定義：

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

  • 如果設定為 default，狀態列將為正常的，即白色，網頁從狀態列以下開始顯示；
  • 如果設定為 black，狀態列將為黑色，網頁從狀態列以下開始顯示；
  • 如果設定為 black-translucent，狀態列將為灰色半透明，網頁將充滿整個螢幕，狀態列會蓋在網頁之上；

該設定只在 iOS 上有效。

電話號碼識別

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

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

可能還有其他型別的數字也會被識別，但在具體的業務場景中，有些時候這是不必須的，所以你可以關閉電話自動識別，然後在需要撥號的地方，開啟電話撥出和簡訊功能。

  1. 關閉電話號碼識別：
  2. 開啟撥打電話功能：
  3. 開啟傳送簡訊功能：

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

  1. 關閉郵箱地址識別：
  2. 開啟郵件傳送：
  3. 如果想同時關閉電話和郵箱識別，可以把它們寫到一條 meta 內，程式碼如下：

附註

部分meta定義來自於trip

相關文章