摘要:本以为解决了,没想到最近提出了安卓手机上线很粗的问题。很明显,它们都是判断如果是安卓就设置为,这不是我想要的结果。我心里想那直接去掉安卓也加上不就得了。说干就干,结果以为好了,然而有一些手机还是有问题,下也出现了粗细不一的。
前言
这个问题之前就遇到过了,参考了很多资料,因为怕改动太多,
后面采取了通过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?
...
当然方法还有很多种,套路都是人研究出来的,下次找到更好的办法再来说。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/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...
阅读 1960·2021-11-24 10:45
阅读 1822·2021-10-09 09:43
阅读 1264·2021-09-22 15:38
阅读 1189·2021-08-18 10:19
阅读 2795·2019-08-30 15:55
阅读 3014·2019-08-30 12:45
阅读 2936·2019-08-30 11:25
阅读 329·2019-08-29 11:30