因此这台手机中，1个CSS像素 = 3*物理像素。即1个CSS像素占了3个物理像素。
这个转换系数，也等同于 dpr ，设备像素比。
因为很明显device-width的宽度值单位是CSS像素。 所以当viewport设置为device-width时，此时它是手机横向分辨率 / 转换系数。即：
例如上述的例子中，该台安卓手机的device-width是1080/3 = 360，即viewport的宽度是 360 CSS像素。
而viewport设置为固定的数字有可能会破坏这种转换关系，都是建议设置viewport宽度为device-width，这样1个CSS像素就尽最大可能刚好占dpr个物理像素点。
肆 | Fourth
为什么会出现比border-width:1px更细的边框？
屏幕能够显示的最小粒度是1个物理像素，而当viewport宽度设置为device-width时，1个CSS像素占用的物理像素是由转换系数决定的。所以，像iPhone6这样的高清屏上，转换系数为3，border-width:1px，这个边框占了3个物理像素。如果能让某个border的宽度为1个物理像素，那么它就比1个CSS像素要细，而本文最开始边框那个更细是因为 经过特殊处理后使其只占用1个物理像素。
让1个CSS像素占用一个物理像素的办法。
方法一：viewport的scale
在viewport的属性里，除了设置宽高的width和height外，还有缩放比例scale。
当scale为1时，页面大小正常，但scale为0.5时，页面被缩小了1倍，本来1个CSS像素宽度占2个物理像素宽度，缩小后的border-width:1px就只占1个物理像素。代码如下：
其中，initial-scale为1/dpr。
优点：
不用为border写很多样式代码，跟原来一样border:1px solid #D5D5D6即可
可以轻松设置圆角 border-radius。
缺点：
1. 整个页面缩小了，副作用就是字体，图片，其他元素的尺寸边距等等都同比例缩小了。这种情况，设置viewport为dpr*document.documentElment.clientWidth，再结合我上一篇文章《【移动适配】移动Web怎么做屏幕适配（一）》，即可解决。
方法二：transform scale
方法一是缩放整个页面，在CSS3标准里，可以缩放某个元素。例如某个div.border-top，为它设置如下样式，使该DIV的顶部有一个边框
.border-top{position: relative;border-top: none !important;}.border-top:after { content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background-color: #D5D5D6; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5);} 在该DIV后面添加一个高度为1px的内容，并且缩小dpr倍，这里就是缩小成原来的1/2。
优点是整个页面不用缩放，缺点是border代码较多，无法实现border-radius圆角
写完濒临虚脱。。
深入理解viewport和px（http://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201509/376281.shtml） A tale of two viewports（http://www.quirksmode.org/mobile/viewports.html）
适配的问题还没讲完，但又臭又长的纯技术文太硬了，下期可能会喝点汤，讲讲故事。
开始码字才知道码字不易，坚持码字更不易。转载请声明来源
如果觉得文章有用，顺手点击下方的 推荐
查看更多关于【移动适配】一个像素的border怎么实现_html/css_WEB-ITnose的详细内容...