一、先羅列一些知名網站的META
1.天貓
<title>天貓觸屏版</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta charset="utf-8">
<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">
2.淘寶
<title>淘寶網觸屏版</title>
<meta charset="utf-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no" name="format-detection">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta property="wb:webmaster" content="c51923015ca19eb1">
<meta name="author" content="m.taobao.com">
<meta name="copyright" content="Copyright ?m.taobao.com 版權所有">
<meta name="revisit-after" content="1 days">
<meta name="keywords" content="">
<meta name="description" content="">
3.京東
<title> 京東 - 手機版 </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
<meta name="format-detection" content="telephone=no">
<meta name="Keywords" content="手機購物,WAP商城,日用百貨,3C家電,汽車用品">
<meta name="description"
content="京東手機版提供了包括數碼、家電、手機、電腦配件、網絡產品、
日用百貨等數萬種商品，手機快捷購物，就上京東手機版。">
4.網易
<title>手機網易網</title>
<meta charset="UTF-8">
<meta content="width=device-width,user-scalable=no" name="viewport">
<meta name="apple-itunes-app" content="app-id=425349261">
<meta name="apple-mobile-web-app-capable" content="yes">
5.百度
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">
meta指元素可提供有關頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關鍵詞。 標簽位于文檔的頭部，不包含任何內容。 標簽的屬性定義了與文檔相關聯的名稱/值對。
二、手機端特有的有哪些？
<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，且不允許用戶點擊屏幕放大瀏覽；
width - viewport的寬度 height - viewport的高度
initial-scale - 初始的縮放比例
minimum-scale - 允許用戶縮放到的最小比例
maximum-scale - 允許用戶縮放到的最大比例
user-scalable - 用戶是否可以手動縮放
第二個meta標簽是iphone設備中的safari私有meta標簽，它表示：允許全屏模式瀏覽；
第三個meta標簽也是iphone的私有標簽，它指定的iphone中safari頂端的狀態條的樣式；
在web app應用下狀態條（屏幕頂部條）的顏色；
默認值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）。
注意：若值為“black-translucent”將會占據頁面px位置，浮在頁面上方
（會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕為40px）。
第四個meta標簽表示：告訴設備忽略將頁面中的數字識別為電話號碼。
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
width: viewport 的寬度 （范圍從 200 到 10,000 ，默認為 980 像素 ）
height: viewport 的高度 （范圍從 223 到 10,000 ）
initial-scale: 初始的縮放比例 （范圍從>0到 10 ）
minimum-scale: 允許用戶縮放到的最小比例
maximum-scale: 允許用戶縮放到的最大比例
user-scalable: 用戶是否可以手動縮放
<meta name="apple-mobile-web-app-capable" content="yes" />
是否刪除默認的蘋果工具欄和菜單欄
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
當設置了app形式之后，作用是控制狀態欄顯示樣式，但是本機ios7測試之后沒啥改變……不解
<meta name="format-detection"content="telephone=no, email=no" />
iphone會把一串數字識別為電話號碼，點擊的時候會提示是否呼叫，屏蔽這功能則把telephone設置為no，要啟用電話功能，請使用<a href="tel:13888888888">Call Me : 13888888888</a>來代替，
郵件則為<a href="mailto:someone@microsoft.com?subject=Hello%20again">發送郵件</a>
三、其他的meta設置
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="320">
<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<meta name="browsermode" content="application">
<meta name="x5-page-mode" content="app">
<meta name="msapplication-tap-highlight" content="no">
此外，apple還有兩個有趣的標簽：
1. apple-touch-icon
< link rel= "apple-touch-icon" sizes= "76x76" href= "touch-icon-ipad.png">
如果 apple-mobile-web-app-capable設置為 yes了，那么在蘋果機的safari上可以通過添加到主屏按鈕將網站添加到主屏幕上。而設置相應 apple-touch-icon標簽，則添加到主屏上的圖標就會使用我們指定的圖片。
2. apple-touch-startup-image
< link rel= "apple-touch-startup-image" href= "/startup.png">
基于 apple-mobile-web-app-capable設置為 yes，可以為WebApp設置一個類似NativeApp的啟動畫面。和 apple-touch-icon不同， apple-mobile-web-app-capable不支持sizes屬性，要使用media來加載不同的啟動畫面。詳細查詢大漠的文章。
// iPhone<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />// iPhone Retina<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
所以，對于移動端，把通用的起始模板寫成sublime的snippet：
<snippet> <content><![CDATA[<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection"content="telephone=no, email=no" /> <title>${1}</title></head><body> ${2}</body></html>]]></content> <tabTrigger>mhd</tabTrigger> <description>Mobile Frame</description> <scope>text.html</scope></snippet>
參考：
http://www.w3cplus.com/mobile/mobile-terminal-refactoring-create-page.html
http://blog.sina.com.cn/s/blog_6d48e77101015kqr.html
http://blog.sina.com.cn/s/blog_3f1fc8950101fz2v.html
