适配问题
怎么适配iphone6
1px问题
为什么页面与设计稿会出现偏差？
dpr=设备像素/ css像素，只有dpr等于1的时候，实际效果和设计稿的尺寸比例才是1:1。
因为iPhone6的DPR（设备像素比）为2，设备像素为750，所以iPhone6的理想视口尺寸为375px。
因为设计稿是基于设备像素，页面是基于css像素的。css中的宽度是基于理想视口的（宽度375px），设计图上是基于设备宽度750px，所以尺寸不对。
怎么处理？
init-scale=0.5 。
缺陷：但是宽度不能自适应
⭐️rem大法
基于html标签的font-size设置的
手淘的做法：
把缩放尺寸设置成dpr的倒数。
读设备宽度，动态设置meta标签的 content属性中的maximun,minimum,user-scable值
<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> </html>网易的做法
现在的设计稿都是750px宽度（p6的宽），那要想实现 css样式：设计图=1：100这种比较方便的折算方式，font-size就要设置成7.5px；
也就是说1rem = 7.5px
<html>
