边框一像素在pc端显示正常,在移动端经常要出问题,在很多手机下显得很粗,原因是设备的devicePixelRatio = 2,所以常见的边框样式:border:1px solid #ccc会显示成2px的宽度,plus下显得更粗。但有以下注意情况:

  • 设置0.5px 普通安卓机下,边框直接消失
  • IOS8以上的系统下,0.5px可以
    针对大量安卓机和系统低于8的IOS,可用以下方案:

    最简单:颜色调浅 (别不信,亲测真有用)

    把颜色#ccc调成#ebebeb,瞬间感觉线条变细。但这里只作为介绍,并不推荐使用。

    最有效:用为元素来虚拟出border

    这个方法在很多移动端UI组件中经常出现,感觉是目前最稳妥的方式了,但麻烦总是难免的:先对定位该元素,再绝对定位为元素,并用 transform的scale使其缩小一半,调整位置。

    其次推荐:用图片

    虽说用图片盖起来麻烦,但说实话边框颜色更改的机会还是很少的,在不需要圆角的情况下,该方法还是很可行的。

    根本上解决问题(很麻烦):用js判断,再修改viewport

    当devicePixelRatio=2时,设置meta为:
    1
    <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

但很多安卓没有devicePixelRatio,此方法很多时候无效。
还是推荐方法2,使用为元素模拟border。