我正在一个网站上工作，用户输入几个名字，并在模板上以漂亮的字体呈现，以便稍后打印和跟踪到其他东西（纸、木头、金属等）。
假设模板是 4" x 3" 实物大小。是否可以在所有设备上显示 4" x 3" 的图像？根据所述设备的分辨率，所有设备的全尺寸都不同。我的最终目标是使图像可以从屏幕上追踪而不是打印。如果需要更多细节，我一定会提供所需的。jquery 或 kineticjs...
再次感谢，托德
编辑：为了清楚起见，我想要显示一个 4x3 英寸的图像，所以如果用户测量他们的实际屏幕，图像将是 4x3 英寸。
这是不可能的，但有一些解决方法。
流行的看法是正确的：CSS 绝对测量是没有用的，除非您的浏览器故意违反规范的建议。
在屏幕上，CSS 英寸是 96 像素。对于“Retina”和基于缩放的设备来说，事情稍微有点复杂，但你仍然不能相信英寸。CSS 媒体查询也无济于事。JS/DOM/等。规范在某些情况下会有所帮助，但据我所知，没有人能够构建任何能够处理大多数情况的东西，更不用说全部了。
有关绝对单位的详细信息，请参阅 CSS 3 文档和早期版本中的Resolutions、Overriding Image Resolutions和Absolute lengths。但这里有一个总结：
在原始 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)。那么，那是如何映射的？嗯，浏览器可以将 2x2 的 220dpi 实际像素映射到 96dpi CSS 像素，这意味着你得到 0.87 CSS 英寸每英寸，或者它可以将 1x1 的 128dpi 虚拟像素映射到 96dpi CSS 像素，这意味着你得到每英寸 0.75 CSS 英寸。你会发现浏览器两者都做，但它们都逐渐适应 Safari 设定的标准.
像 iPhone 这样的 326dpi 移动设备呢？移动 WebKit 是围绕点击缩放构建的，因此事情变得更加复杂，因此您通常不会以指定的大小查看内容。但你能得到的最好结果是每个 CSS 像素 4x4 设备像素，这意味着每英寸 1.18 CSS 英寸。
CSS 3媒体查询可让您区分，例如 1:1 和 2:1 情况（如 96dpi 和 192dpi），但它们不能让您确定实际映射。
那么，如果 CSS 没有实际工作，为什么还要拥有所有这些复杂的功能呢？好吧，一方面，它确实适用于打印输出。（在打印输出中，像素是错误的，所以英寸是正确的。）另一方面，它鼓励基于视角而不是固定尺寸来设计东西——你真的不希望在 5 英寸 iPhone 和 5 英寸 iPhone 上使用 5 英寸宽的东西” 在您的 56 英寸电视上放宽，但在极少数情况下除外。但主要是为了向后兼容。正如规范所说，“......太多现有内容依赖于 96dpi 的假设，而打破该假设会破坏内容。”
我不会详细说明如何使用 JS 来提供帮助，但基本思想是您可以访问诸如窗口为一的屏幕的物理尺寸之类的东西，并尝试计算您与 96dpi 的距离。有关示例，请参阅此页面的源代码。但这真的行不通。例如，我有一台内置 15" 2800x1800/1680x1050 屏幕和 21" 1920x1200 外屏的笔记本电脑。最近的 Firefox 将内部屏幕检测为 20.6" 的 1680x1050 和 20.6" 的 1920x1200 外部屏幕。Safari 在 23.6" 时将它们检测为 1920x1200。旧版本的 Firefox 在 20.6" 时将它们检测为 3600x1200 的一个屏幕（并且他们必须非常努力地从 OS X 中获取错误信息……）。
您可以采取其他变通方法来检测 WebKit 或较旧的 Firefox 等，并弥补已知的错误，这可能会将您的成功率从 1/6 提高到 1/2。
Flash 或 Java 可能会做得更好……但我认为将它们中的任何一个嵌入到页面上只是为了测量屏幕大小是不值得的。
那么，你能做些什么呢？
第一种可能性是使用 PDF 而不是 HTML。您可能必须设置处置以鼓励它在阅读器/预览/等中打开。而不是在浏览器中内联。这仍然可能不起作用，因为某些用户可能有阅读器/预览/等。默认缩放。即使它总是有效，也有很多情况下这不是一个可接受的答案。
我见过的最好的纯网络解决方案是这样的：
未来呢？
This problem is not exactly secret. Pixels Per Inch Awareness and CSS Px discusses it (from the POV of trying to get an exact number of pixels, rather than an exact number of inches, but the issues are obviously complementary). Meanwhile, Introduction to CSS Media Queries is a more practical "how to" article on how to use what's actually available, without getting into why it's not what you actually want. These and many other articles point out what a pain the current design is.
这经常出现在www 风格的列表中，并且争论总是这样：大多数时候，当人们认为他们想要物理英寸时，他们错了。想想一个在不同视觉距离下使用的浏览器，比如电视或 iPhone。所以，即使我们没有向后兼容的问题，我们仍然想要一些接近我们所拥有的东西。物理英寸唯一有用的是“真人大小”图表。
但是当你确实想要一个“真人大小”的图表时呢？嗯……每次讨论似乎都以有人说“如果你真的需要它，建议添加一个 'physin' 单位而不是改变 'in' 单位”，然后是，“我真的需要那个，所以我建议添加一个”物理单位”，然后事情逐渐消失。也许最终它会发生，但到目前为止，还没有。
我以前遇到过这个问题，恐怕这是不可能的 - 计算机本身通常不会知道屏幕的像素密度（它会知道屏幕有多少像素，但不一定知道显示器有多大面积是）。
有一些解决方法，但你经常需要改变你的目标：当我过去使用地图而不是显示比例（1:2500 或其他）时，我显示了一个条形图，它是已知的像素数（我知道真实世界的长度）。
在您的情况下，您可以让用户测量屏幕上已知数量的像素，输入真实世界的大小，并在生成图像时将其用作比例因子。
不理想，但我认为这是你能得到的最好的。
编辑：另一种方法（这可能比让用户测量和输入尺寸更好）是允许他们将图像的大小调整为他们可能躺在周围的已知真实世界对象的大小（例如，信用卡）。一旦他们调整了图像的大小，您就会知道像素密度并知道要渲染图像的大小。这让我想起了 80 年代校准操纵杆……