大战border的0.5px | 易学教程

前言

这个问题之前就遇到过了，参考了很多资料，因为怕改动太多，
后面采取了通过js判断dpr,修改viewport的scale值。
本以为解决了，没想到最近UI提出了安卓手机上线很粗的问题。
我认真回去看了代码，发现确实没注意到。

之前的代码是这样的：

; (function(f, i) {
    var b = i.documentElement;
    var e = f.navigator.appVersion;
    var g = e.match(/android/gi);
    var c = e.match(/iphone/gi);
    var k = f.devicePixelRatio;
    var j = 1,
    d = 1;
    if (c) {
        if (k >= 3) {
            j = 3
        } else {
            if (k >= 2) {
                j = 2
            } else {
                j = 1
            }
        }
    } else {
        j = 1
    }
    d = 1 / j;
    var h = i.querySelector('meta[name="viewport"]');
    if (!h) {
        h = i.createElement("meta");
        h.setAttribute("name", "viewport");
        if (b.firstElementChild) {
            b.firstElementChild.appendChild(h)
        } else {
            var a = i.createElement("div");
            a.appendChild(h);
            i.write(a.innerHTML)
        }
    }
    if (j) {
        h.setAttribute("content", "initial-scale=" + d + ", maximum-scale=" + d + ", minimum-scale=" + d + ", user-scalable=no");
    }
    window.DPR = j
})(window, document);

这个是链家的解决方案，和手淘差不多的类型吧，都是去动态修改scale。
很明显，它们都是判断如果是安卓scale就设置为1，这不是我想要的结果。
我心里想那直接去掉if,安卓也加上不就得了。╮(╯_╰)╭
说干就干♂，结果以为好了，然而有一些手机还是有问题，IOS下也出现了粗细不一的BUG。
头疼头疼。_(:з」∠)_

最后搜索了各种东西，最后还是老老实实用了这种：

li{position:relative;XXXX}
li:after{
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #d9d9d9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    }

收工！=￣ω￣=，最终效果

顺便说说

除了上面2种方法，我知道还有很多种比如：

border-image和background的方法；
svg的方法
渐变的方法
box-shadow?
...

当然方法还有很多种，套路都是人研究出来的，下次找到更好的办法再来说。

来源：https://www.cnblogs.com/baimeishaoxia/p/12590893.html

标签

border

viewport

var