Image 在'处显示图像；生活'；尺寸不只是全尺寸？

我在一个网站上工作，用户输入几个名字，然后在模板上以漂亮的字体呈现，以便稍后打印和跟踪到其他东西（纸张、木材、金属等）

假设模板的大小为4“x 3”。是否可以在所有设备上显示图像4“x 3”？根据所述设备的分辨率，所有设备上的全尺寸是不同的。我的最终目标是使图像可以从屏幕上追踪，而不是打印。如果需要更多的细节，我一定会提供所需的。jquery或kineticjs

再次感谢你， 托德

---

编辑：为了清楚起见，我有一个4x3英寸的图像要显示，因此如果用户测量他们的实际屏幕，图像将为4x3英寸。

我以前遇到过这个问题，我担心这是不可能的-计算机本身通常不知道屏幕的像素密度（它知道屏幕有多少像素，但不一定知道显示区域有多大）。

有很多方法可以解决这个问题，但你经常需要改变你的目标：当我过去用地图做这件事而不是显示比例（1:2500或其他什么）时，我会显示一个已知像素数的条形图（我知道真实世界的长度）。

在您的情况下，您可以让用户测量屏幕上已知数量的像素，输入真实世界的大小，并在生成图像时将其用作比例因子。

不太理想，但我认为这是你能得到的最好的。

---

编辑：另一种方法（可能比让用户测量并输入尺寸更好）是允许他们将图像大小调整为可能存在的已知真实对象（例如，信用卡）的大小。一旦他们调整了图像的大小，你就知道像素密度，也知道渲染图像的大小。这让我想起了80年代校准操纵手柄的情景…

这是不可能的，但有一些解决办法

---

流行的观点是正确的：CSS绝对测量是无用的，除非您的浏览器故意违反规范的建议

在屏幕上，CSS英寸是96像素。对于“视网膜”和基于缩放的设备来说，事情有点复杂，但你仍然不能相信英寸。CSS媒体查询也没有帮助。JS/DOM/etc。在某些情况下，规范可以有所帮助，但据我所知，没有人能够构建任何能够处理大多数情况的东西，更不用说所有情况了

---

有关绝对单位的详细信息可以在CSS 3文档和早期版本中找到。但这里有一个摘要：

在最初的CSS中，英寸应该是英寸，像素应该是像素，两者之间没有固定的映射。但是CSS 2.1增加了每英寸96像素的假设，而没有改变定义。这显然意味着像素或英寸都不是真的（除非你有一个96dpi的屏幕，而大多数人没有）

CSS 3规定每个CSS设备必须选择是“锚定”到像素还是物理测量。它特别建议高分辨率设备（如打印媒体）锚定到物理测量，而低分辨率设备（如计算机屏幕）锚定到像素。因此“…物理单位可能与其物理测量值不匹配。”（事实上，它们不会匹配，除非在96dpi设备上。）

因此，使用112dpi笔记本电脑，每个设备像素映射到一个CSS像素，这意味着每实际英寸可获得0.86 CSS英寸

220dpi笔记本电脑呢，比如15英寸的Retina MacBook Pro？在OS X下，用户不直接使用2880x1800屏幕，而是选择五种虚拟分辨率中的一种，比如1440x900或1680x1050（在外壳下，视频卡实际上是渲染到更高的分辨率，然后缩小到2880x1800）那么，这是如何映射的呢？浏览器可以将220dpi的真实像素映射为2x2到96dpi的CSS像素，这意味着你可以得到每英寸.87 CSS英寸，也可以将1x1到96dpi的128dpi的虚拟像素映射为每英寸.75 CSS英寸。你会发现浏览器可以同时做到这两个，但它们都逐渐适应了这种情况Safari设定的标准

326dpi的移动设备呢，比如iPhone？事实上，移动WebKit是围绕点击缩放构建的，所以你通常不会以指定的大小查看内容。但你能得到的最好结果是每CSS像素4x4个设备像素，即每英寸1.18 CSS英寸

CSS 3允许您区分，例如，1:1和2:1情况（如96dpi和192dpi），但它们不允许您确定实际映射

那么，如果CSS实际上不起作用，为什么它会有这么复杂的功能呢？首先，它对打印输出有效。（在打印输出中，像素是错误的，所以英寸是正确的。）另一方面，它鼓励基于可视角度而不是固定大小来设计东西。你真的不想要5英寸宽的东西iPhone和5英寸宽的56英寸电视，除了极少数情况。但主要是为了向后兼容。正如规范所说，“……太多的现有内容依赖于96dpi的假设，打破这个假设就会破坏内容。”

---

关于如何使用JS提供帮助，我不会给出所有细节，但基本的想法是，你可以访问屏幕的物理尺寸，比如窗口是一个，并尝试计算你离96dpi有多远。例如，请参阅源代码到。但它确实不起作用。例如，我有一台笔记本电脑，它有一个15“2800x1800/1680x1050内置屏幕和一个21英寸1920x1200外部屏幕。最近的Firefox检测到内部屏幕为1680x1050（20.6英寸），外部屏幕为1920x1200（20.6英寸）。Safari检测到它们都是1920x1200（23.6英寸）。一个旧版本的Firefox检测到它们在20.6英寸的3600x1200（20.6英寸）处有一个屏幕”（他们已经