html - 高密度显示器上笔画宽度的 REM 单位

Question

我遇到的问题是，我认为它可能是一个错误，但不确定是否是。

基本上，当您的笔划宽度 = 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 栏更宽。

这是有意为之还是有办法解决？

Answer 1

是的这是一个错误。

事实证明，Paul LeBeau 为我指明了正确的方向 - 这个问题在现有的三星浏览器中是可以复制的，但在相同设备上的 Chrome 浏览器中是无法复制的。

因此:

一些浏览器(即使它们共享一个共同的基础)会有某些错误，这就是其中之一，所以在移动设备上使用 SVG 中的 REM 单位时要注意这一点:)