大战border的0.5px

人走茶凉 提交于 2020-03-29 11:00:52

前言

这个问题之前就遇到过了,参考了很多资料,因为怕改动太多,
后面采取了通过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. ...

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!