大戰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種方法，我知道還有不少種好比：

1. border-image和background的方法；

2. svg的方法

3. 漸變的方法

4. box-shadow?

5. ...

固然方法還有不少種，套路都是人研究出來的，下次找到更好的辦法再來講。