關於微信公衆號內嵌網頁的幾個meta標籤

最近在作微信公衆平臺內嵌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：這個站點很不錯的說