根据移动设备的缩放比例动态调整视口大小

一般情况下，我们设置视口标签meta的初始比例是1

<meta name="viewport"
         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

这样的话，如果设备的缩放比例devicePixelRatio为2的话，那么意味着手机会用2个物理像素来显示1个像素，一般情况下，在pc中，我们会根据屏幕物理分辨路来设置显示分辨率，用1个物理像素来显示1个实际像素，以达到最佳的显示效果，如果显示分辨率小于物理分辨率（比如1920*1080的屏幕设置成1366*768），则会产生锯齿，画面变得粗糙。同理，在移动端可以通过动态调整缩放比例，来让一个物理像素显示一个实际像素，来达到最佳显示效果，实际案例中，淘宝的移动端就是动态设置缩放比例。

1.动态设置视口标签

//1. 获取屏幕尺寸
var deviceWidth=document.documentElement.clientWidth;
//2. 设置初始缩放比例
var scale = 1 / window.devicePixelRatio;
//3. 设置meta标签，然后插入dom中
document.write(`<meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}">`);

2.设置html的字体大小

假设设计稿750px的宽度，里面有一个元素375px，那么这个盒子占屏幕50%宽度，我们需要让这个元素在所有的设备中都占据屏幕的50%。那么我们需要知道设备1%的宽度，然后用50乘以这1%的宽度就得到了50%的宽度，那么把这个1%的宽度设置成html的字体大小，1rem就是设备的1%，50rem就可以占据屏幕的50%

//4. 得到设备1%的宽度
var width = deviceWidth / 100;
//5. 设置html标签的字体大小
document.getElementsByTagName('html')[0].style.fontSize = width + 'px';

但是，当在iphone5等小屏幕设备中，1%的宽度小于12像素，而chrome浏览器能够显示的最小宽度为12px，chrome会把小于12px的字体大小修改为12px，那么50rem就大于50%的宽度了，所以不能用1%作为1rem。

//把100改为10或者其他值,保证font-size的大小大于12px，在淘宝中是除以10
var width = deviceWidth / 10;
//设置html标签的字体大小
document.getElementsByTagName('html')[0].style.fontSize = width + 'px';

3.配合less进行换算

为了使设计稿中375的元素依然在屏幕中占50%，一个方便的算法是，元素的宽度/设计稿的十分之一就是元素的大小

//设计稿宽度是750px
div{
    width: 375/75rem;
}