移动端0.5px，除了scale(0.5)和background-image解决方法还有啥？

Question

如图，今天遇到这么一个问题，设计师给的1px，在ios上变成了2px，安卓我不知道，如果就ios这样怎么区分，写hack?
搜索了下有这么两种办法：
一个是transform: scale(0.5)；
一个是当做background。
但是我觉得都不优雅，有没更好的办法。
对了，0.5px兼容性如何。

Answer 1

除了在这里提供的方式以外，个人比较偏爱的是svg background的方式：

<style>
    .test { width: 100px; height: 100px; margin: 10px; }
    .test1 { border: 1px solid #000; }
    .test2 { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='0' y1='0' x2='100%' y2='0' stroke='black' stroke-width='1'/><line x1='0' y1='0' x2='0' y2='100%' stroke='black' stroke-width='1'/><line x1='100%' y1='0' x2='100%' y2='100%' stroke='black' stroke-width='1'/><line x1='0' y1='100%' x2='100%' y2='100%' stroke='black' stroke-width='1'/></svg>") ; }
</style>
<div class="test test1"></div>
<div class="test test2"></div>

原因是svg的1像素还真的是1物理像素。

Answer 2

.5px 在安卓上你会发现没有几台机子是可以正常使用的

Answer 3

由于项目需求，放弃了svg，参考手淘以及其他相关网站，最后我选择了判断手机改viewport。