1px问题的定义

在一些Retina屏幕的机型上，移动端页面的1px会变得很粗，呈现出不止1px的效果。
原因在于CSS中的1px并不能和移动设备上的1px划等号，它们之间的比例关系有一个专门的属性来描述：window.devicePixelRatio = 设备的物理像素 / CSS像素，设置的1pxCSS像素，在实际设备上会用多于1个物理像素来进行渲染，所以实际看到的会比1px粗一些。

1px问题的解决方法

1. 直接把1px改成1/window.devicePixelRatio后的值：
   这是目前为止最简单的一种方法。
   这种方法的缺点在于兼容性不行，IOS系统需要8及以上的版本，安卓系统则直接不兼容。

2. 伪元素先放大后缩小:
   在目标元素的后面追加一个::after伪元素，将这个元素设置为absolute后整个伸展开铺在目标元素上，然后把它的宽和高都设置为目标元素的两倍，border值设为1px；接着借助CSS3transform中的scale，把整个伪元素缩小为原来的50%，此时伪元素的宽高刚好可以和原有的目标元素对齐，而border也缩小为了1px的二分之一，间接地实现了0.5px的效果。
   这种方法的可行性会更高，兼容性也更好，唯一的缺点是代码会变多。

3. 修改meta标签使得viewport缩放：

这种方法使得整个页面被缩放了，这时1px已经被处理成物理像素大小，这样的大小在手机上显示边框很合适；但是一些原本不需要被缩小的内容，比如文字、图片等，也被无差别缩小掉了。