最近和两个同学在开发一个微信公众平台。我在写一些链接页面时，一开始简单地写了一些HTML页面，在手机上测试显示ok。后来，一个同学说了我写的页面怎么能够扩大，他给我随便演示的几个微信链接页面不能扩大，让我去改。于是我看了一部分他人的代码，发现在他们的页面头部都有下面这么一部分代码。
<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=no" />
<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">
<link rel="stylesheet" type="text/css" href="http://res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/client-page1baa9e.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="http://res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/pc-page1b2f8d.css"/>
<![endif]-->
<link media="screen and (min-width:1000px)" rel="stylesheet" type="text/css" href="http://res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/pc-page1b2f8d.css"/>
<style>
body{ -webkit-touch-callout: none; -webkit-text-size-adjust: none; }
</style>
<script type="text/javascript">
document.domain = "qq.com";
var _wxao = window._wxao || {};
_wxao.begin = (+new Date());
</script>
我没有深入研究过HTML的meta标签，我上网查了资料，才弄明白怎么回事。
X-UA-Compatible是IE8专有的标记，是用来指定Internet Explorer 8浏览器模拟摸个特定版本IE浏览器的渲染方式，以此来解决IE浏览器的兼容问题。Edge 模式 通知Windows Internet Explorer已*别的可用模式显示内容。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
设置可视区域，传统桌面浏览器就是指除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域，移动设备不一样，需要设置: 1. width //宽度 2. initial-scale //初始缩放比例 3. maximum-scale //允许用户缩放的最大比例 4. user-scalable //用户是否可以用手缩放
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
下面的设置是针对苹果设备的
设置页面是否全屏显示，yes，web应用全屏显示
<meta name="apple-mobile-web-app-capable" content="yes">
设置状态栏的颜色，content可取default、black、black-translucent，对应默认，黑色和黑色透明。默认和黑色，页面在工具栏下显示，黑色透明将全屏显示
<meta name="apple-mobile-web-app-status-bar-style" content="black">
设置在页面中是否自动识别电话号码
<meta name="format-detection" content="telephone=no">
webkit-touch-callout:禁用长按弹出效果，none禁用，default使用弹出效果 webkit-text-size-adjust：调整页面文本大小，none不会自动调整，auto自动调整
body{ -webkit-touch-callout: none; -webkit-text-size-adjust: none; }
IE 9 使用的样式
<!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="http://res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/pc-page1b2f8d.css"/>
屏幕宽度大于1000px使用的样式
<![endif]--> <link media="screen and (min-width:1000px)" rel="stylesheet" type="text/css" href="http://res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/pc-page1b2f8d.css"/>
参考资料
- http://www.cnblogs.com/chenqiang001/archive/2012/01/05/2312808.html
- http://blog.sina.com.cn/s/blog_4dffbd380100kvht.html