适配
2017-09-27 本文已影响0人
洋葱大大
设备像素和css像素
- web前端领域，像素分为设备像素和CSS像素
- 在缩放比例为1:1的时候一个CSS像素的大小等于一个设备像素的大小。
- 一个CSS像素的大小是可变的，比如用后缩放页面的时候，实际上就是在缩小或放大CSS像素，而设备像素无论大小还是数量都是不变的。
视口
- 在PC端，布局视口就是浏览器窗口
image.png
- 在移动端，视口被分为两个：布局视口、视觉视口。
image.png
- 移动端还有一个理想视口，它是布局视口的理想尺寸，即理想的布局视口。（注：理想视口的尺寸因设备和浏览器的不同而不同，但这对于我们来说无所谓）
- 可以将布局视口的宽度设为理想视口
<meta name="viewport" content="width=device-width" />
设备像素比
- 公式成立的大前提：（缩放比例为1）
设备像素比(DPR) = 设备像素个数 / 理想视口CSS像素个数(device-width) - 缩放：缩小放大的是 CSS像素
viewport适配
在设备像素比为2的情况下，一个CSS像素等于两个设备像素
image.png
如果我们想让 一个CSS像素的宽度 = 一个设备像素的宽度，我们就要将CSS像素缩小为原来的0.5倍，实际上，我们缩小的倍数 = 设备像素比的倒数。
<meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=0.5,user-scalable=no" />
image.png
当然这只是在设备被像素比为2的情况下，为了适应所有的设备，我们应该用javascript代码动态生成meta标签：
<meta name="viewport" content="">
var scale = 1 / window.devicePixelRatio;//window.devicePixelRatio 的值为设备像素比。
document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
viewport适配在不同设备的情况下，元素的宽度是不会变的，所以元素不能根据设备进行等比缩放了。
rem等比适配
动态设置html字体大小：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
这里的话以iphone5为例，因为缩放0.5，所以clientWidth=640，因此1rem=64px;
方案：
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="" />
<style>
body{
margin: 0;
padding: 0;
}
.box{
width: 2.66666667rem;
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>
