我遇到的问题是,我认为它可能是一个错误,但不确定是否是。
基本上,当您的笔划宽度 = 1 rem 时,浏览器采用根字体大小并将其乘以屏幕密度比,如下所示:
在大多数 PC 等上:
ratio: 1
html font size: 14px
svg stroke width: 1rem => 14px * 1 = 14px
effective pixel stroke width => 14px * 1 = 14px
而且效果很好。
在手机上这个比例更高,所以:
ratio: 2
html font size: 14px
svg stroke width: 1rem => 14px * 2 = 28px
effective pixel stroke width => 28px * 2 = 56px
所以有效行程是预期的两倍。
https://codepen.io/sivael/pen/eYmGZpW
代码笔在这里。
代码笔由两个半透明的矩形组成。它们在 PC 上重叠,但在移动设备上,SVG 栏更宽。
这是有意为之还是有办法解决?
最佳答案
是的这是一个错误。
事实证明,Paul LeBeau 为我指明了正确的方向 - 这个问题在现有的三星浏览器中是可以复制的,但在相同设备上的 Chrome 浏览器中是无法复制的。
因此:
一些浏览器(即使它们共享一个共同的基础)会有某些错误,这就是其中之一,所以在移动设备上使用 SVG 中的 REM 单位时要注意这一点:)
关于html - 高密度显示器上笔画宽度的 REM 单位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59536206/