Question

我需要在任何屏幕上（包括手机，平板电脑......），方形图像的大小始终相同。因此，如果我在任何屏幕上取尺子和测量图像，例如它必须是5mm。它必须是JavaScript。

我想知道该图像的大小是否仅取决于屏幕的DPI，还是取决于屏幕分辨率？如果在JavaScript中我检测到屏幕的DPI（如果需要还有分辨率）是否有任何公式（或一些JavaScript函数）来计算图像大小以获得始终相同的结果？

最后，我可以在某个单元中定义图像尺寸，以确保图像始终相同吗？

我在这里提出的问题是因为它与JavaScript有关，如果您认为它更适合其他论坛，请告诉我。

...谢谢

Answer 1

如果我理解正确，您希望图像始终具有固定的绝对物理尺寸。没有办法实现这一目标。您可以使用绝对单位（如英寸，厘米或毫米）定义宽度，但渲染结果因屏幕而异。

每个浏览器都在内部1 inch = 96px设置，并且在该基础上计算所有其他单位。因此，仅当屏幕的物理像素大小恰好为25.4 / 96 = 0.26458 mm时宽度设置为5mm的元素实际为5mm。

但是像素的绝对物理尺寸在不同的屏幕上差别很大，而javascript无法检测到。

编辑根据您的评论：是可以使用您自己的屏幕。您可以显示宽度设置为200mm的元素，并使用标尺以mm为单位测量屏幕上的实际宽度。商200 / your_measurement为您提供转换因子。

如果您现在想要将宽度设置为固定值，则必须将该值乘以系数。

显示以下文件并测量红色样方的宽度：

<!doctype html>
    <head>
        <style>
            div {width: 200mm; height: 200mm; margin: 50px; background-color: red;}
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

转换因子对您要使用的所有绝对单位都有效。

通过用户的一些互动，您可以像在链接到的ZEISS页面上那样校准用户屏幕。用户必须将屏幕上的元素与固定宽度（例如信用卡的宽度= 54mm）进行比较。由于此处用户已修复且代码执行测量，因此计算因子是相反的：conversion factor f = code_result / 54。

我制作了一个FIDDLE here，步长为0.5mm，以获得更高的准确度。

所有屏幕上的图像大小始终相同

1 个答案: