最近公司项目要解决一像素问题。想了想，在网上搜了一堆博客，总结出最好的办法应该是通过css内容的transformscale缩放1px来模拟1px在设备上的效果。但是这种方法有太多的局限性。然后坚持用js解决css解决不了的问题的原则，再结合vue的自定义命令，手卷了一个单像素的vue自定义命令。打算丢给giuhub保存。顺便总结一下遇到的问题。项目地址：https://github.com/HelloWorld20/onepx欢迎使用。如有错误，也欢迎指正。原因众所周知，自从iPhone4带来了Retina显示屏之后，移动端就引入了一个叫做devicePixelRatio的东西。另一方面，如果你为一个html标签写了一个小于1px（H5）的边框；IOS可以正常渲染，但是Android设备不渲染。所以没有正常的方法可以让Android设备渲染一行1个物理像素。点击此处查看DEMO；当然，只有在移动端才能看到效果：在线解决方案网上可以找到很多解决方案，本文基本上总结了网上所有的解决方案。那么结论就是：用CSS伪元素渲染一个1px（H5）的div，用CSS3scale缩放dpr次来渲染一行1px的物理像素。不过，理论终究是理论，在项目中使用的时候还存在很多问题。1.如果两个伪元素都被占用，则无法实现。网上的解决方案都是用CSS伪元素实现的，伪元素只有前后。二、所以如果在实际开发中使用before和after的话，CSS是不能模拟一个像素的。2.您必须手动设置圆角。圆角是最头疼的问题。虽然CSS伪元素可以实现圆角，但是CSS伪元素只能通过border-radius:inherit获取与父元素相同的圆角值。缩放后就不一样了，css无法计算缩放后父元素的大小。元素般的圆角。而且js不能操作css伪元素，只能自己手动计算dpr，然后给css伪元素设置圆角。3.-webkit-device-pixel-ratio不是标准方法。CSS中判断一个设备的像素比的方法是-webkit-device-pixel-ratio，这个不是标准的方法，所以用起来很慌张。JS的window.devicePixelRatio已经完全支持了，顶多是undefined。完全不用担心兼容性问题。4.有些标签不能设置伪元素类型为文本输入标签，所以标签中不能插入dom（虽然控制台显示插入了，但是不会渲染），所以伪元素不能模拟。1像素。更好的解决方案是基于用JS解决CSS解决不了的问题的思路。结合Vue提供的自定义指令，可以在html标签中添加一条指令，想要增加1个像素，js可以通过Vue的自定义指令获取到对应的DOM，那么一切皆有可能。最后实现了一个Vue命令，只需要在对应的HTML标签中添加一个命令即可。其他Vue指令是自动处理的。而且这条指令在我们的项目中运行了一段时间，基本是靠谱的。注意绑定元素必须显示和声明其position值：relative、fixed、absolute其中之一，否则模拟的单像素div不能定位到该位置，必须清空对应的DOM。边框样式不能用于
