最近在做微信公眾平台內嵌app，其實也就是web app="=，不過就是基於微信內置瀏覽器（safari加了一個WeixinJS對象），稍微記一下幾個html的meta標簽（web app通用）
這是我用自己的公眾號做的一個test頁面（主要用於觀察下微信后台編輯器生成的頁面布局） http://mp.weixin.qq.com/s?__biz=MzA4MjMwNDQzOQ==&mid=200473874&idx=1&sn=7541441abe50a22f7d5545adc69eae66&key=e60cf81314c277c7924c692b2c5f64482bcf5943e5f8b7ff4505ec0db12b3dc4a97e75414d80514730f8cb2d2df5f69d&ascene=1&uin=ODI2ODQ5MzYw
微信的頁面meta有：
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> <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">
下面來一個個meta解釋下:
1: <meta http-equiv="X-UA-Compatible" content="IE=edge">
X-UA-Compatible 是針對 IE8 版本的一個特殊文件頭標記，用於為 IE8 指定不同的頁面渲染模式。這里有篇博客詳解
http://bijian1013.iteye.com/blog/1978191
2: <meta name="apple-mobile-web-app-capable" content="yes">
設置該web頁是否能以全憑模式運行，默認情況下是在safari中全屏展示。在js中可以修改window.navigator.standalone變量來決定使用全屏效果。
3: <meta name="apple-mobile-web-app-status-bar-style" content="black">
設置web頁的工具欄樣式
4: <meta name="format-detection" content="telephone=no">
設置safari中展示網頁時是否自動將數字識別為電話號碼（點擊可以撥號）。默認是yes，如果不需要則設置為no。
5: <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
設置web頁在iPhone瀏覽器中展示的size。
手機瀏覽器是把頁面放在一個虛擬的“窗口”（viewport）中，通常這個虛擬的“窗口”（viewport）比屏幕寬，這樣就不用把每個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的布局），用戶可以通過平移和縮放來看網頁的不同部分。移動版的 Safari 瀏覽器最先引進了 viewport 這個 meta tag，讓網頁開發者來控制 viewport 的大小和縮放，其他手機瀏覽器也基本支持。
其中：
width：控制 viewport 的大小，可以指定的一個值，如果 600，或者特殊的值，如 device-width 為設備的寬度（單位為縮放為 100% 時的 CSS 的像素）。
height：和 width 相對應，指定高度。
initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。
maximum-scale：允許用戶縮放到的最大比例。
minimum-scale：允許用戶縮放到的最小比例。
user-scalable：用戶是否可以手動縮放。
這個是我的參考http://blog.wpjam.com/m/viewport-meta-tag/。ps：這個站點很不錯的說