首页 > 云开发 > Html > 正文

后台-系统设置-扩展变量-手机广告位-内容正文顶部

大战border的0.5px

Html

前言

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

...

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

文章来源:segmentfault,作者:秋刀鱼Bin。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:william.shi#ucloud.cn(邮箱中#请改为@)进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
后台-系统设置-扩展变量-手机广告位-内容正文底部

本文标签

border px css

推荐文章

热门标签

    热门文章 最新文章 文章云

站内导航

全站搜索