摘要:本以為解決了,沒想到最近提出了安卓手機上線很粗的問題。很明顯,它們都是判斷如果是安卓就設置為,這不是我想要的結果。我心里想那直接去掉安卓也加上不就得了。說干就干,結果以為好了,然而有一些手機還是有問題,下也出現了粗細不一的。
前言
這個問題之前就遇到過了,參考了很多資料,因為怕改動太多,
后面采取了通過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?
...
當然方法還有很多種,套路都是人研究出來的,下次找到更好的辦法再來說。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/111695.html
摘要:本以為解決了,沒想到最近提出了安卓手機上線很粗的問題。很明顯,它們都是判斷如果是安卓就設置為,這不是我想要的結果。我心里想那直接去掉安卓也加上不就得了。說干就干,結果以為好了,然而有一些手機還是有問題,下也出現了粗細不一的。 前言 這個問題之前就遇到過了,參考了很多資料,因為怕改動太多,后面采取了通過js判斷dpr,修改viewport的scale值。本以為解決了,沒想到最近UI提出了...
摘要:接下來就為各個部分添加動畫文字旋轉知識有限,不足之處請多包涵。 直接上圖(gif) showImg(https://segmentfault.com/img/bV85Wz?w=500&h=253); 整體的html不多贅述 The Force Awakens ...
摘要:在原來有一篇文章寫到了效果篇純實現的思路與實例這篇文章主要寫各種自定義的復選框,實現如圖所示的復選框大致的代碼都如下所示那么對應的代碼第一種實現如圖所示代碼 在原來有一篇文章寫到了《CSS效果篇--純CSS+HTML實現checkbox的思路與實例》.這篇文章主要寫各種自定義的checkbox復選框,實現如圖所示的復選框:showImg(https://segmentfault.com...
摘要:在原來有一篇文章寫到了效果篇純實現的思路與實例這篇文章主要寫各種自定義的復選框,實現如圖所示的復選框大致的代碼都如下所示那么對應的代碼第一種實現如圖所示代碼 在原來有一篇文章寫到了《CSS效果篇--純CSS+HTML實現checkbox的思路與實例》.這篇文章主要寫各種自定義的checkbox復選框,實現如圖所示的復選框:showImg(https://segmentfault.com...
閱讀 2002·2021-11-24 10:45
閱讀 1859·2021-10-09 09:43
閱讀 1298·2021-09-22 15:38
閱讀 1228·2021-08-18 10:19
閱讀 2843·2019-08-30 15:55
閱讀 3067·2019-08-30 12:45
閱讀 2970·2019-08-30 11:25
閱讀 362·2019-08-29 11:30