我所了解的meta @ 互聯網 - 大數據

文章出處

總況

meta 標簽分兩大部分：HTTP 標題信息（http-equiv）和頁面描述信息（name）。

http-equiv 屬性的 Content-Type 值（顯示字符集的設定）

設定頁面使用的字符集，用以說明主頁制作所使用的文字語言，瀏覽器會根據此來調用相應的字符集顯示 page 內容。

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

name 屬性的 viewport 值（移動屏幕的縮放）

也就是可視區域。對于桌面瀏覽器，我們都很清楚 viewport 是什么，就是除去了所有工具欄、狀態欄、滾動條等等之后用于看網頁的區域，這是真正有效的區域。由于移動設備屏幕寬度不同于傳統 web，因此我們需要改變 viewport 值。

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;
}

name 屬性的 format-detection 值（忽略頁面中的數字識別為電話號碼）

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

使設備瀏覽網頁時對數字不啟用電話功能（不同設備解釋不同，iTouch 點擊數字為存入聯系人，iPhone 為撥打電話），忽略將頁面中的數字識別為電話號碼。
若需要啟用電話功能將 telephone=yes 即可，若在頁面上面有 Google Maps, iTunes 和 YouTube 的鏈接會在ios設備上打開相應的程序組件。

name 屬性的 apple-mobile-web-app-capable 值（網站開啟對 web app 程序的支持）

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

網站開啟對 web app 程序的支持。
該 meta 可以看出內容為“蘋果設備 web 應用程序 xx”，就是說該 meta 是專門定義 web 應用的。

name 屬性的 apple-mobile-web-app-status-bar-style 值（改變頂部狀態條的顏色）

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

在 web app 應用下狀態條（屏幕頂部條）的顏色；
默認值為 default（白色），可以定為 black（黑色）和 black-translucent（灰色半透明）；

name 屬性設置作者姓名及聯系方式

<meta name="author" contect="liudanyun, liudy1024@163.com" />

蘋果 Web App 其他設置

配合 Web App 的 icon 和啟動界面需要額外的兩端代碼進行設定

<link rel="apple-touch-icon-precomposed" href="iphone_logo.png" />

說明：這個 link 就是設置 Web App 的放置主屏幕上 icon 文件路徑。

使用：

該路徑需要注意的就是放到將網站的文檔根目錄下但不是服務器的文檔的根目錄。
圖片尺寸可以設定為 57*57（px）或者 Retina 可以定為 114*114（px），iPad 尺寸為 72*72（px）

<link rel="apple-touch-startup-image" href="logo_startup.png" />

說明：這個 link 就是設置啟動時候的界面。

使用：

放置的路徑和上面一樣。
官方規定啟動界面的尺寸必須為 320*640（px），原本以為 Retina 屏幕可以支持雙倍，但是不支持，圖片顯示不出來。

常用meta說明

<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />

第一個meta標簽表示：強制讓文檔的寬度與設備的寬度保持1:1，并且文檔最大的寬度比例是1.0，且不允許用戶點擊屏幕放大瀏覽； 尤其要注意的是content里多個屬性的設置一定要用分號+空格來隔開，如果不規范將不會起作用。

其中：

width - viewport的寬度
height - viewport的高度
initial-scale - 初始的縮放比例
minimum-scale - 允許用戶縮放到的最小比例
maximum-scale - 允許用戶縮放到的最大比例
user-scalable - 用戶是否可以手動縮放第二個meta標簽是iphone設備中的safari私有meta標簽，它表示：允許全屏模式瀏覽；第三個meta標簽也是iphone的私有標簽，它指定的iphone中safari頂端的狀態條的樣式；第四個meta標簽表示：告訴設備忽略將頁面中的數字識別為電話號碼

頁面描述

<link rel="apple-touch-icon-precomposed" href="http://www.xxx.com/App_icon_114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.xxx.com/App_icon_72.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.xxx.com/App_icon_114.png" />

這個屬性是當用戶把連接保存到手機桌面時使用的圖標，如果不設置，則會用網頁的截圖。有了這，就可以讓你的網頁像APP一樣存在手機里了

<link rel="apple-touch-startup-image" href="/img/startup.png" />

這個是APP啟動畫面圖片，用途和上面的類似，如果不設置，啟動畫面就是白屏，圖片像素就是手機全屏的像素

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

這個描述是表示打開的web app的最上面的時間、信號欄是黑色的，當然也可以設置其它參數，詳細參數說明在：Supported Meta Tags

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

這2個描述也很有用的，如果沒有它，你的web app會用safari瀏覽器打開，有了它，就會用獨立進程的無地址欄的打開，完全可以和普通的APP比擬了

下面還有個不錯的css，是用來區分視網膜屏幕的，這樣你可以在iphone這樣的手機里載入2x的圖片，就不會模糊了

@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min--moz-device-pixel-ratio:1.5),only screen and (min-device-pixel-ratio:1.5),only screen and (min-resolution:200dpi)
{
#logo{background-image: url(logo@2x.png);}
}

樣式表

<link rel=”apple-touch-startup-image” href=”startup.png” /> // 設置開始頁面圖片
<link rel=”apple-touch-icon” href=”iphon_tetris_icon.png”/> // 在設置書簽的時候可以顯示好看的圖標
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">    // 肖像模式樣式
<link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css"   // 風景模式樣式

//豎屏時使用的樣式
<style media="all and (orientation:portrait)" type="text/css">
#landscape { display: none; }
</style>

//橫屏時使用的樣式
<style media="all and (orientation:landscape)" type="text/css">
#portrait { display: none; }
</style>