- <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:[email protected]?subject=Hello%20again">發送郵件</a>
- 其他的meta設置
<!-- 啓用360瀏覽器的極速模式(webkit) --> <meta name="renderer" content="webkit"> <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 微軟的老式瀏覽器 --> <meta name="MobileOptimized" content="320"> <!-- uc強制豎屏 --> <meta name="screen-orientation" content="portrait"> <!-- QQ強制豎屏 --> <meta name="x5-orientation" content="portrait"> <!-- UC強制全屏 --> <meta name="full-screen" content="yes"> <!-- QQ強制全屏 --> <meta name="x5-fullscreen" content="true"> <!-- UC應用模式 --> <meta name="browsermode" content="application"> <!-- QQ應用模式 --> <meta name="x5-page-mode" content="app"> <!-- windows phone 點擊無高光 --> <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
轉載自：http://www.cnblogs.com/viccici/p/3906830.html
