移动端适配终极解决方案

发表于

淘宝使用 rem 适配方案

计算缩放值 initial-scale

1
2
var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

动态生成 html 的 font-size 值，全局使用 rem 

1
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

对于iphone6来说，计算出 font-size 为 75px，所以现在只需要将测量的尺寸数据除以75就转换成了rem单位。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
<head>
	<title></title>
	<meta charset="utf-8" />
	<meta name="viewport" content="" />
	<style>
	body{
		margin: 0;
		padding: 0;
	}
	.box{
		width: 2.66666667rem; /*设计稿的200px*/
		height: 2.66666667rem;
		background: red;
	}
	</style>
</head>
<body>

	<div class="box"></div>

	<script>
	var scale = 1 / window.devicePixelRatio;
	document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
	document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
	</script>
</body>
</html>

一篇真正教会你开发移动端页面的文章(二)