59. 实现移动端1px边框

[ForeveHG]

1. 为什么会有1px边框问题 在设计稿中，1px边框表示的是1px物理像素的边框，但是css或js设置的1px却是逻辑像素1px 设备尺寸：设备对角线的长度，单位：英寸 分辨率：屏幕宽、高上的像素点数，比如iphone6的分辨率是750 1334 物理像素：屏幕实际拥有的像素点，比如iphone6的物理像素是750像素点1334像素点 逻辑像素：因为各种尺寸和分辨率的设备层出不穷，如果css1px真实对应设备的1px物理像素，那针对不同分辨率的屏幕，都需要特殊设计一份设计稿，否则分辨率翻一倍，图片在设备就缩小一倍，针对这个问题，乔布斯提出了逻辑像素，在iphone4中，把22个物理像素当成1px像素来使用，因此逻辑像素是在css或js中使用的像素，通过window.screen.width 、 window.documentElement.clientWidth获取到的都是逻辑像素。 设备像素比：通过window.devicePixelRatio获取，逻辑像素 设备像素比 = 物理像素

在pc端，1px逻辑像素对应1物理像素，所以不存在1px边框问题，只有在移动端设备像素比为2的屏幕上，css设置的1px，显示到屏幕上就是22的物理像素，要实现11物理像素，需要设置css为0.5px，但各移动端浏览器对0.5px的兼容不同，所以移动端1px边框需要特殊处理