我正在一个用户输入几个名字的网站上工作，它在模板上以漂亮的字体呈现，以便稍后打印并追踪到其他东西（纸张，木头，金属等）。
假设模板的寿命为4“x 3”。是否可以在所有设备上显示4“x 3”的图像？根据所述设备的分辨率，所有设备上的全尺寸是不同的。我的最终目标是使图像可以从屏幕上追踪而不是打印。如果需要更多细节，我肯定会提供所需的信息。 jquery或kineticjs ...
再次感谢， 托德
编辑：为了清楚我有一个4x3英寸的图像我想要显示，所以如果用户测量他们的实际屏幕，图像将是4x3英寸。
答案 0 :(得分：2)
这是不可能的，但有一些解决方法。
流行的看法是正确的：CSS绝对测量是没用的，除非您的浏览器故意违反规范的建议。
在屏幕上，CSS英寸为96像素。对于＆＃34; Retina＆＃34;和基于缩放的设备，但你仍然不能信任英寸。 CSS媒体查询也没有帮助。 JS / DOM /等。在某些情况下，规格可以提供帮助，但据我所知，没有人设法构建任何可以处理大多数情况的东西，更不用说全部了。
有关绝对单位的详细信息，请参阅CSS 3文档和早期版本中的Resolutions，Overriding Image Resolutions和Absolute lengths。但这是一个总结：
在原始CSS中，英寸应该是英寸，像素应该是像素，两者之间没有固定的映射。但CSS 2.1增加了假设每英寸有96个像素，而不改变定义。这显然意味着像素或英寸不是真实的（除非你有一个96dpi的屏幕，大多数人都没有）。
CSS 3指定每个CSS设备必须选择是否＆＃34;锚定＆＃34;像素或物理测量。它特别建议像印刷媒体这样的高分辨率设备应该锚定到物理测量，而像计算机屏幕这样的低分辨率设备应该锚定到像素。因此＆＃34; ......物理单位可能与他们的物理测量值不匹配。＆＃34; （事实上，他们将不会，除了在96dpi设备上。）
因此，使用112dpi笔记本电脑，每个设备像素映射到一个CSS像素，这意味着每英寸单位得到0.86 CSS英寸。
220dpi笔记本电脑怎么样，比如15＆＃34; Retina MacBook Pro？好吧，在OS X下，用户不会直接使用2880x1800屏幕，而是选择五种虚拟分辨率中的一种，如1440x900或1680x1050（在封面下，视频卡实际上渲染到更高的分辨率，然后缩小到2880x1800）。那么，那张地图怎么样？好吧，浏览器可以将220dpi真实像素映射为2x2到96dpi CSS像素，这意味着你可以获得每英寸0.87 CSS英寸，或者它可以将1d1的128dpi虚拟像素映射到96dpi CSS像素，这意味着你得到.75 CSS每英寸英寸。你会发现浏览器都在做这两种情况，但它们逐渐适应Safari的标准设置。
像iPhone这样的326dpi移动设备怎么样？由于移动WebKit是围绕点击缩放构建的，所以事情甚至更加复杂，因此您通常无法查看指定大小的内容。但是你能得到的最好的是每个CSS像素4x4设备像素，这意味着每英寸1.18英寸CSS。
CSS 3 media queries，可让您区分例如1：1和2：1的情况（96dpi和192dpi），但它们不允许您确定实际的映射。
那么，为什么CSS具有所有这些复杂的功能，如果它实际上没有工作？嗯，首先，它 适用于打印输出。 （在打印输出中，像素是错误的，所以英寸是正确的。）另一方面，它鼓励根据视角而不是固定尺寸设计东西 - 你真的不想想要< / em> 5＆＃34; 5＆＃34; iPhone和5＆＃34;在您的56＆＃34;电视，除了极少数情况。但主要是为了向后兼容。正如规范所说，＆＃34; ...过多的现有内容依赖于96dpi的假设，打破这种假设会破坏内容。＆＃34;
我不会提供有关如何使用JS提供帮助的所有详细信息，但基本的想法是，您可以访问窗口的屏幕物理尺寸等内容，并尝试计算距离你来自96dpi。有关示例，请参阅this page的来源。但它真的不起作用。例如，我有一台15＆＃34; 2800x1800 / 1680x1050内置屏幕和21＆＃34; 1920x1200外屏。最近的Firefox将内部屏幕检测为1680x1050，频率为20.6＆＃34;外部屏幕为1920x1200，频率为20.6＆＃34;。 Safari在23.6＆＃34;处检测到它们为1920x1200。旧版本的Firefox将它们检测为3600x1200，20.6＆＃34; （而且他们必须努力工作才能从OS X中获取错误的信息......）。
您可以执行其他解决方法来检测WebKit或较旧的Firefox等，并补偿已知错误的事情，这可能会将您的成功率从1/6提高到1/2。
Flash或Java可能会做得更好......但我不认为值得将它们中的任何一个嵌入到页面上来衡量屏幕尺寸。
那么，你能做些什么呢？
第一种可能性是使用PDF而不是HTML。您可能必须设置处置以鼓励在Reader / Preview /等中打开它。而不是在浏览器中内联。这仍然可能不起作用，因为一些用户可能有Reader / Preview /等。默认缩放。即使它总是有效，但在很多情况下这并不是一个可以接受的答案。
我见过的最好的纯网络解决方案是这样的：
未来怎么样？
这个问题并不完全是秘密。 Pixels Per Inch Awareness and CSS Px讨论它（从POV试图获得精确的像素数，而不是精确的英寸数，但问题显然是互补的）。与此同时，Introduction to CSS Media Queries更实用，如何＃34;}关于如何使用实际可用内容的文章，没有说明为什么它不是你真正想要的。这些和许多其他文章都指出了当前设计的痛苦程度。
这会在www-style列表中定期出现，而且这个论点总是这样：大多数时候，当人们认为他们想要物理英寸时，他们就会出错。想想用于不同视觉距离的浏览器，如电视或iPhone。因此，即使我们没有落后的竞争问题，我们仍然需要一些接近我们所拥有的东西。物理英寸唯一有用的时间是＆＃34;寿命大小＆＃34;图。
但是当你做想要一个＆＃34;真人大小＆＃34;图？好吧......每次讨论似乎都会结束，有人说'＃34;如果你确实需要那么，建议添加一个＆＃39; physin＆＃39;单位而不是改变＆＃39; in＆＃39; unit＆＃34;，然后，＆＃34;我确实需要它，所以我建议添加一个物理素质＆＃39;单位＆＃34;，然后事情逐渐消失。也许最终它会发生，但到目前为止，它还没有。
答案 1 :(得分：1)
之前我遇到过这个问题，我担心这是不可能的 - 计算机本身通常不会知道屏幕的像素密度（它会知道有多少像素屏幕是，但不一定是显示区域有多大）。
有办法解决，但你经常要改变你的目标：当我过去用地图做这个而不是显示比例（1：2500或其他）时，我已经显示一个已知像素数的条形图（我知道现实世界的长度）。
在您的情况下，您可以让用户测量屏幕上已知数量的像素，输入实际大小，并在生成图像时将其用作比例因子。
不理想，但我认为这是你最好的。
编辑：另一种方法（可能比让用户测量并输入大小更好）是允许他们将图像大小调整为他们可能拥有的已知真实世界对象的大小躺在附近（例如，信用卡）。一旦他们调整了图像大小，您就会知道像素密度并知道渲染图像的大小。这让我想起在80年代校准操纵杆虽然......