摘要：所以是不能用正常的方法来让安卓设备渲染一个物理像素的线。其他的指令自动处理。
最近公司项目要解决一像素问题，自己琢磨了一阵子并且网上搜索了一堆博客，总结出最好的办法应该是通过css的transform scale缩放1px的内容来模拟设备上1px的效果了。但是这个方法有太多局限。然后秉着css解决不了的问题就用js来解决的原则，然后结合vue的自定义指令，手撸了一个一像素vue自定义指令。打算扔到giuhub留存。顺便总结一下遇到的问题。
项目地址：https://github.com/HelloWorld20/onepx
欢迎各位取用。如有错误的地方，也欢迎指正。
原因众所周知，自从iPhone 4带来了Retina display后，移动端开始引入了一个叫设备像素比（devicePixelRatio）的东西。
另一方面，如果给一个html标签写一个小于1px（H5）的border；IOS可以正常渲染，但是安卓设备不渲染。所以是不能用正常的方法来让安卓设备渲染一个1物理像素的线。
戳这里看DEMO;
当然用移动端才能看到效果：
网上的解决方案网上搜能搜出很多解决方案，这篇文章基本汇总了网上的所有方案。然后结论是：使用css的伪元素来渲染一个1px（H5）的div，并且使用CSS3的scale来缩放dpr倍，从而渲染一个1px物理像素的线。
然而理论毕竟理论，用到项目中的时候还是遇到了很多问题
1. 如果两个伪元素都被占用，则无法实现网上的方案都是用CSS伪元素来实现的，而伪元素只有before和after两个，所以要是实际开发中中占用了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. 部分标签不能设置伪元素type为text的input标签就无法在标签内插入的dom（虽然控制台里显示已经被插入，但是不会被渲染出来），所以伪元素也无法给其加上模拟的1像素。
更好的方案本着CSS解决不了的问题就用JS来解决的思想。再结合Vue提供的自定义指令，可以在想要加1像素的html标签上加上一个指令，js能通过Vue的自定义指令拿到对应的DOM，那么就一切皆有可能。
最终实现了一个Vue指令，只需要给对应的HTML标签加上一条指令就行。其他的Vue指令自动处理。并且这个指令在我们项目中运行过一段时间，基本是可靠的。
要注意的地方绑定的元素必须显示声明其position值为：relative、fixed、absolute之一，不然模拟一像素的div无法定位到位置
务必给对应的DOM清除掉border样式
不能用于标签等内部不能插入元素的标签
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/117309.html
摘要：在这里简单叙述一下我仿某鱼部分布局以及功能实现的过程，仅做学习用途。另一方面，当与现代化的工具链以及各种支持类库结合使用时，也完全能够为复杂的单页面应用提供驱动。可以进行确认收货后删除订单。 前言 每次写文章时，总会觉得比写代码难多了，可能这就是我表述方面的不足吧，然而写文章也是可以复盘一下自己的开发过程，对自己还是受益良多的。在这里简单叙述一下我仿某鱼部分布局以及功能实现的过程，仅做...
摘要：两日前，发了一篇吐槽，莫名的火了一把。关于的第一个，其实就是声明一个常量，不允许变更。另外对象迭代这里出自，阮一峰大神写的入门指南，对象篇。 两日前，发了一篇吐槽，莫名的火了一把。经过大家的建议与鼓励，于是修改了简历，开始了重新投递，2天后接到第一份面试邀请。 此文为个人面试经历，QA问答过程与总结，不透露面试公司及面试人员，内容真实，如果有面试过我的大佬看到博客，欢迎指出问题。 循序...
摘要：两日前，发了一篇吐槽，莫名的火了一把。关于的第一个，其实就是声明一个常量，不允许变更。另外对象迭代这里出自，阮一峰大神写的入门指南，对象篇。 两日前，发了一篇吐槽，莫名的火了一把。经过大家的建议与鼓励，于是修改了简历，开始了重新投递，2天后接到第一份面试邀请。 此文为个人面试经历，QA问答过程与总结，不透露面试公司及面试人员，内容真实，如果有面试过我的大佬看到博客，欢迎指出问题。 循序...
摘要：如果你尚不了解，并想简单入门，可以阅读整理快速入门笔记网易严选感受开发什么都不说，先给你感受下的效果。此处对寄有厚望单位中的所有属性值的单位均为，也可省略不写，系统会默认为单位。 showImg(https://segmentfault.com/img/remote/1460000012869672); 自打出生的那一天起，Weex 就免不了被拿来同 React Native「一决高下...
摘要：随着移动端的发展，在手机上看电脑端的页面已成为非常普及现象。方案一固定高度，使其宽度自适应这也是我接触移动端适配第一次使用的方案。 不知不觉做前端已经两年了，从PC端，移动端，微信小程序一路走来到今天刚刚开放注册的快应用(手机厂商对抗小程序的新技能,所以在注册时用的是qq邮箱的话要去垃圾箱里才能找到注册邮件)，对于前端圈日新月异的磅礴发展对于大前端发展是喜闻乐见的，这次的快应用的手机厂...
阅读 2727·2021-11-24 09:39
阅读 972·2021-11-18 10:02
阅读 734·2021-11-12 10:35
阅读 2530·2021-09-29 09:34
阅读 3342·2021-09-24 10:23
阅读 1490·2021-09-22 15:41
阅读 1504·2019-08-30 15:55
阅读 3417·2019-08-30 13:58
