War border of 0.5px

Foreword

I encountered this problem before too, and reference a lot of information, for fear too many changes,
back taken by js judgment dpr, modify the scale value of the viewport.
I thought resolved, I did not expect recently proposed UI Android phones on the line is very thick problem.
I go back and carefully read the code and found really did not notice.

Before the code is as follows:

; (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);

This is a chain of home solutions, and about the same type of hand wash it, is to dynamically modify the scale.
Obviously, if they are judged on a scale Andrews is set to 1, this is not what I want.
I thought that directly remove them if, Andrews also add does not have to. ╮ (╯_╰) ╭
went ahead ♂, the results of that well, but there are some phones still have problems, there have been at IOS varying thickness BUG.
Headache headache. _ (: з "∠) _

The last search all sorts of things, finally honest with this:

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);
    }

knock off! = ¯ω¯ =, final results

by the way

In addition to the above two methods, I know there are many such as:

1. border-image and the background method;

2. svg method

3. Gradient method

4. box-shadow?

5. ...

Of course, there are many methods, routines are people finding out, the next to find a better way then for the.