手机端页面自适应解决方案—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" />