js-viewport适配

发表于 | 分类于 | | 阅读次数

移动端布局的三种方式：百分比 viewport适配 rem

viewport适配:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
(function(){
	var w = window.screen.width;
	var targetW = 320;
	var scale = w/targetW; //当前尺寸/目标尺寸
	var meta = document.createElement("meta");
	meta.name = "viewport";
	meta.content = "user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+""
	//console.log(scale);
	document.head.appendChild(meta);
})();
</script>
相当于在其头部添加标签：
<meta name="viewport" content="user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">