手机端页面自适应解决方案—rem布局

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