关于微信公众号内嵌网页的几个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：这个站点很不错的说