我從HTML的meta中學到了什麼

緣自世界發表於2019-02-16
HTML

meta

meta中有這樣幾個常用屬性：http-equiv，name，content，包括html5新增的charset。

注意：content屬性用來儲存meta資訊的內容，所有的主流瀏覽器都支援它，但它一般很少單獨使用，我們一般使用http-equiv或name來定義content屬性資訊（或值）的名稱，http-equiv和name在一個meta中通常只能用其中一個。

現介紹常用的，再介紹一些其它的。

name常見的有：

application-name // 代表web應用程式的名字
author // 規定文件作者的名字
description // 對頁面的描述，SEO需要用到
keywords // 頁面的關鍵字詞，多個用逗號隔開，SEO需要用到

編碼格式

<meta charset="utf-8">

視窗寬度

<meta name="viewport" content="width=device-width, inital-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  • width：用於設定視視窗的寬度，可以設定為device-width（裝置的寬度），也可以是自定義的值。
  • initial-scale：用於設定縮放比例，可以是任意數值的比例。
  • minimum-scale：用於設定最小縮放比例。
  • maximum-scale：用於設定最大縮放比例。
  • user-scalable：用於設定是否禁止使用者縮放頁面。

自動識別

<meta name="format-detection" content="telphone=no">
  • telphone：是否禁止瀏覽器識別頁面中的電話號碼。no：禁止，yes不禁止
  • eamil：是否就職瀏覽器識別頁面中的郵件地址。no：禁止，yes不禁止

用http-equiv於模擬一個 HTTP 響應頭

我們都知道，HTML4.0.1定義html文件的編碼方式是如下面這樣：

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

但是在HTML5中我們可以像下面這樣定義：

<meta charset="utf-8">

那麼它除了這樣的使用場景外，還有別的一些嗎。如果你強制重新整理頁面，可以駛入像下面這樣的程式碼：

<meta http-equiv="refresh" content="3">

如上面的程式碼的意思是：強制瀏覽器每3秒重新整理一次。但要慎用。

當然，還有一些其他的好用的效果，如果你想要給應用定義多套樣式，然後根據使用者選擇來載入不同的樣式，你可以將http-equiv設定為default-style，然後你設定content的值為link或style的對應值。具體可參考如下程式碼：

<meta http-equiv="default-style" content="s1">
<style title="s1">
body {
  background: red;
}
</style>
<style title="s2">
body {
  background: green;
}
</style>

以前，我不知道style或link中新增title有什麼用，但上面的例子是它的一個用途。

針對蘋果裝置的設定

// 下面程式碼來自天貓移動web
<meta name="apple-mobile-web-app-capable" content="yes"/> // 可以讓app執行於全屏模式
<meta name="apple-mobile-web-app-title" content="TMALL"/> // 可以讓app的標題不同於頁標題
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/> // 配置app的狀態列，可設定為default, black, 和 black-translucent。

狀態列設定，可參考Changing The iOS Status Bar Of Your Progressive Web App

當然，我們也可以設定書籤或者快捷鍵的圖示。可參考如下程式碼：

<link href="https://placehold.it/72"
          sizes="72x72"
          rel="apple-touch-icon-precomposed">

可以根據不同的型號裝置，來設定不同的sizes。

也可以設定它的啟動背景圖。可參考如下程式碼：

<link href="https://placehold.it/1496x2048"
          media="(device-width: 768px) and (device-height: 1024px)
                 and (-webkit-device-pixel-ratio: 2)
                 and (orientation: landscape)"
          rel="apple-touch-startup-image">

當然，我們也可以設定其它的meta，用來控制不同瀏覽器的行為，也可以控制不同搜尋引擎的行為。

其他meta的使用

可參考gethead meta 或 模擬原生IOS效果。

更多的前端相關資源，可關注我的github

相關文章