html - 以厘米为单位调整图像大小

Question

我有一张 SVG 图像，我想以 15×15cm 的尺寸显示在屏幕上，无论屏幕分辨率、像素密度等如何。

<img src="foo.svg" class="foo">

.foo {
    width: 15cm;
    height: 15cm;
}

这会导致图像以大约 15×15cm 呈现，但存在相当大的偏差，尤其是在平板设备上(我的 iPad 以 呈现>8.3×8.3cm).

我知道 cm 测量值主要用于打印，但有没有办法在屏幕上可靠地复制它们？

Answer 1

确实没有什么好的方法可以做到这一点。虽然设备有时确实知道它们的物理屏幕有多大，但它们不会将此信息传达给网页。

如果您考虑一下，大多数时候您并不需要精确的物理尺寸。某些设备(例如手机)离您的脸更近，因此其文字较小。另一方面，如果您的页面显示在电视屏幕上，您会希望文本更大，以便您可以从更远的地方阅读。

您可以通过检查移动设备上的用户代理来接近，但这种方法不适用于桌面浏览器，因为用户代理告诉您的硬件信息很少。