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

标签 html css svg

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

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

相关文章:

html - 在 div 中居中图像

css - 为 IE6 保存具有 alpha 透明度的 PNG 图像的最佳方法是什么?

css - 更改动画或过渡的 SVG Logo 的大小

svg - 是否可以从封闭的 HTML 中导航 SVG 对象的元素?

html - 如何同步 SVG 动画?

css - Codepen 上的 ASCII 艺术并不总是显示下划线

javascript - 为什么这个 while 循环会导致无限循环?

jquery - RaphaelJS + jQuery : How to define ID and CLASSES for paths

php - 在 HTML/PHP 中输​​入 RGB 值的框中显示颜色

javascript - jQuery 动画重叠问题