dpr，设备像素比
首先要知道什么是dpr。
像素分为物理像素和逻辑像素，物理像素就是设备屏幕上一个个的发光点，个数在设备出厂时就固定了；逻辑像素就是我们平时说的css的单位，是一个绝对单位。
dpr，全称devicePixelRatio，就是设备每个逻辑像素内拥有的物理像素的个数，即设备像素比。
用window.devicePixelRatio可以获取dpr。
以iphone6为例，dpr是2，意思就是每一个css像素内会有两个物理像素，css 的1px会覆盖两个设备物理像素，所以我们设置border-width：1px的时候就会看起来比较粗；
怎么解决？
用js获取设备像素比，然后通过改变meta标签的initial-scale来控制缩放比例，注意这个缩放是相对于viewport的
viewpoet
移动设备的viewport有三个：layout viewport、visual viewport、ideal viewport
layout viewport：浏览器默认的viewport，如果把浏览器可视区域的宽度设为viewport的话，某些网站就会因为viewport过窄而显示错乱，挤成一团，所以浏览器在默认情况下会将viewport设为一个较宽的值，比如980px（chrome的默认viewport宽度就是980px）。浏览器默认viewport比浏览器可视区域宽，会出现横向滚动条。layout viewport可以通过document.documentElement.clientWidth来获取
visual viewport：浏览器可视区域的大小，可以通过window.screen.width来获取
ideal viewport：很多网站都会为了移动端进行单独的设计，所有我们需要有一个能够完美适配移动设备的viewport。所谓的完美适配，是指不需要用户缩放和横向滚动条就能正常查看网站所有内容，文字大小合适。ideal viewport的宽度等于设备的屏幕宽度
利用meta标签对viewport进行控制：
移动设备默认的viewport是layout viewport，当我们需要ideal viewport时在head标签中插入meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scalable=1.0" />
initial-scale：页面初试缩放值，这个缩放是指相对于ideal viewport来缩放的
当width和initial-scale大小冲突时，viewport选择两个值中较大的一个。
关于缩放和默认值：
缩放是相对于ideal viewport来缩放的，值越大，当前viewport的宽度就越小。
比如iphone6的ideal viewport是375px，设置initial-scale=0.5，viewport会变成750px，这里的缩小0.5倍，是指原来需要1px填充的宽度，现在需要0.5px就能填充了，所以原来宽度是375px，现在需要750px；
所以： visual viewport（document.documentElement.clientWidth） = ideal viewport（设备宽度） / 当前缩放值
