大戰border的0.5px

flybywind 發布于2019-08-01 15:53 / 3234人閱讀

摘要：本以為解決了，沒想到最近提出了安卓手機上線很粗的問題。很明顯，它們都是判斷如果是安卓就設置為，這不是我想要的結果。我心里想那直接去掉安卓也加上不就得了。說干就干，結果以為好了，然而有一些手機還是有問題，下也出現了粗細不一的。

前言

這個問題之前就遇到過了，參考了很多資料，因為怕改動太多，
后面采取了通過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?

...

當然方法還有很多種，套路都是人研究出來的，下次找到更好的辦法再來說。

云服務器 GPU云服務器 oracle8.0.5下載 px border html 0.1px

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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
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