高密度显示器上笔画宽度中的 REM 单位答案

【问题标题】：REM units in Stroke-width on high density displays高密度显示器上笔画宽度中的 REM 单位
【发布时间】：2019-12-30 19:56:17
【问题描述】：

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

基本上当您的笔画宽度 = 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

所以有效行程是预期的两倍。

在这里编写代码。

codepen 由两个半透明的矩形组成。它们在 PC 上重叠，但在移动设备上 SVG 栏更宽。

这是有意的还是有办法解决它？

【问题讨论】：

当你说“移动”是什么意思？这支笔在 Android 版 Chrome 中看起来不错。我猜你可能正在 iOS 上使用 Safari 进行测试？ IIRC Safari 已经或确实有各种 rem 单位的错误。
啊，是的，我使用的三星浏览器似乎都有这个问题，而 chrome 没有。谢谢指点！（我认为三星浏览器是 chrome。

标签： html css svg

【解决方案1】：

是的这是一个错误。

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

因此：

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

【讨论】：