大战border的0.5px

flybywind 发布于2019-08-01 15:53 / 3098人阅读

摘要：本以为解决了，没想到最近提出了安卓手机上线很粗的问题。很明显，它们都是判断如果是安卓就设置为，这不是我想要的结果。我心里想那直接去掉安卓也加上不就得了。说干就干，结果以为好了，然而有一些手机还是有问题，下也出现了粗细不一的。

前言

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

...

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

云服务器专线服务 oracle8.0.5下载 px border html 0.1px

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50184.html

大战border的0.5px

摘要：本以为解决了，没想到最近提出了安卓手机上线很粗的问题。很明显，它们都是判断如果是安卓就设置为，这不是我想要的结果。我心里想那直接去掉安卓也加上不就得了。说干就干，结果以为好了，然而有一些手机还是有问题，下也出现了粗细不一的。前言这个问题之前就遇到过了，参考了很多资料，因为怕改动太多，后面采取了通过js判断dpr,修改viewport的scale值。本以为解决了，没想到最近UI提出了...

cfanr 2019-08-29 11:30 评论0 收藏0
【css3简单animation动画】实现星球大战荧幕变幻

摘要：接下来就为各个部分添加动画文字旋转知识有限，不足之处请多包涵。直接上图（gif） showImg(https://segmentfault.com/img/bV85Wz?w=500&h=253); 整体的html不多赘述 The Force Awakens ...

chemzqm 2019-08-29 15:09 评论0 收藏0
【css3简单animation动画】实现星球大战荧幕变幻

摘要：接下来就为各个部分添加动画文字旋转知识有限，不足之处请多包涵。直接上图（gif） showImg(https://segmentfault.com/img/bV85Wz?w=500&h=253); 整体的html不多赘述 The Force Awakens ...

Cheriselalala 2019-08-05 13:39 评论0 收藏0
CSS效果篇--这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

摘要：在原来有一篇文章写到了效果篇纯实现的思路与实例这篇文章主要写各种自定义的复选框，实现如图所示的复选框大致的代码都如下所示那么对应的代码第一种实现如图所示代码在原来有一篇文章写到了《CSS效果篇--纯CSS+HTML实现checkbox的思路与实例》.这篇文章主要写各种自定义的checkbox复选框，实现如图所示的复选框：showImg(https://segmentfault.com...

Yuqi 2019-08-01 18:22 评论0 收藏0
CSS效果篇--这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

摘要：在原来有一篇文章写到了效果篇纯实现的思路与实例这篇文章主要写各种自定义的复选框，实现如图所示的复选框大致的代码都如下所示那么对应的代码第一种实现如图所示代码在原来有一篇文章写到了《CSS效果篇--纯CSS+HTML实现checkbox的思路与实例》.这篇文章主要写各种自定义的checkbox复选框，实现如图所示的复选框：showImg(https://segmentfault.com...

laoLiueizo 2019-08-29 14:12 评论0 收藏0