手机端页面自适应解决方案—rem布局
参考:
http://www.jianshu.com/p/b00cd3506782
页面上的元素大小都使用的是rem作为单位,而不是px
以下代码放在页面的最后,界面加载完之后执行,自动调整大小
<script type="text/javascript"> function autoSize() { var docEl = document.documentElement; var clientWidth = docEl.clientWidth; if (clientWidth) {; docEl.style.fontSize = 24 * (clientWidth / 640) + 'px'; } } if (document.addEventListener) { window.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', autoSize, false); document.addEventListener('DOMContentLoaded', autoSize, false); } autoSize(); </script>
常用的HTML header配置
<meta charset="utf-8" />
<meta name="accept-encoding" content="gzip,deflate" />
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta name="viewport"
content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<meta name="format-detection" content="telephone=no" />