1

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

<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 尺寸的纸并询问用户缩放页面。我最好让用户设置他们的系统，但是怎么做呢？

4

3 回答 3

1

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

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

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

于 2013-02-16T04:53:52.170 回答
1

理论上，根据 CSS 2.1 规范，mm单位（以及类似的单位，如cmand in）与物理单位相关。因此，如果您以mm单位设置图像宽度，浏览器应将图像缩放到给定的物理尺寸，并具有设备分辨率允许的精度。

实际上，浏览器的行为更像 CSS3 值和单位 CR 中描述的方式。关于物理单位的部分说根据定义1in等于96px，在打印机等高分辨率设备上，英寸是锚定单位，对应于实际的物理英寸，而在显示器等低分辨率设备上，像素是锚定单位。它补充说：“请注意，如果锚单位是像素单位，则物理单位可能与其物理测量不匹配。” （此外，即使在打印机中，CSSin和物理英寸之间的对应关系也不一定准确。）

所以，不可能的任务。

对于用户校准，我不会使用 A4 纸。它很大，并不是每个人手头都有 A4 纸，尤其是在标准纸张尺寸不同的国家。有英寸和毫米的尺子会更好。也许您可以添加一个缩放小部件以使缩放更容易。

于 2013-02-16T07:35:53.960 回答
0

谢谢大家！我结合了所有提示并制作图片： http ://www.clker.com/clipart-258249.html 用户采用常见的东西之一并通过缩放使其适合图片。

于 2013-02-19T16:01:29.240 回答