css - 如何在浏览器中正确显示公制单位

Question

我想在网站上显示商品的“自然尺寸”图片。首先我当然要计算图片的大小:

<Height of picture in pixels> * <real height of item in mm>
-----------------------------------------------------------
        <height of item on the picture in pixels>

公式逻辑正确，适用于

desktop 17'' 4:3 monitor 1280*1024. 

任何其他设备显示的指标都是错误的。我测试:

2 smartphone.
22'' 1920*1080 desktop monitor
13.3'' 1366*768 notebook
14'' 1600*900 notebook

它们的宽高比都不是 4:3。这有什么问题吗？我怎样才能达到我的目标？我搜索网络，但我发现的唯一解决方法是显示一张 A4 尺寸的纸并询问用户缩放页面。我最好让用户设置他们的系统，但如何设置？

Answer 1

不幸的是，虽然存在查询浏览器以获取其显示器每英寸精确像素的方法，但浏览器供应商决定同意一个方便的谎言……所有浏览器都报告每英寸 96 像素。虽然您可以让浏览器向您报告这一事实，但无法获得每英寸的真实像素。

一个著名的例子是，尽管像素密度完全不同，但无法通过 Javascript、HTML 或 CSS 检测 iPad 2 和 iPad Mini 之间的差异。

实际上，我发现使用纸张并要求用户缩放以校准“实际显示尺寸”的方法相当聪明。如果您让它易于使用，我相信他们会喜欢这个功能!