javascript - 通过浏览器以编程方式确定 DPI？

Question

我想以编程方式确定用户显示器的 DPI，以便以精确的单位数(厘米/英寸)显示网页。我知道这是一个奇怪的要求:它是针对一个可视化研究项目的，它是一种控制。我们目前通过让用户将信用卡放在屏幕上并将可调整大小的 div(通过 Mootools)与真实信用卡匹配来做到这一点，瞧，我们可以获得 DPI 并正确显示页面。

谁能想到一种编程方式来做到这一点？

Answer 1

如果您在 javascript/mootools 中执行此操作，CSS units是你的 friend 。您可以以英寸或厘米，甚至磅(1/72 英寸)为单位指定尺寸。如果您出于某种原因绝对需要 DPI，即使您可以指定这些单位的大小，只需将您正在使用的“可调整大小”的 div 调整为已知大小并根据转换后的像素大小进行计算。

编辑:

Unfortunately, the CSS units of points, cm, and in are not physically correct. They are only relatively correct. This was the first thing I tried until I realized it wasn't working and checked the CSS spec.. to my dismay. – Brandon Pelfrey

那是个很好的观点;浏览器倾向于通过假设默认 DPI(我认为是 72 或 96)并使用它来伪造它。

好吧，如果您需要像您要求的那样精确尺寸，那您就不走运了。如果无法读取浏览器所在显示器的当前分辨率以及该显示器的“可视屏幕区域”，您将永远无法获得它。你不可能通过Javascript得到它。

我建议您做出默认假设，即浏览器根据 CSS 单位执行和调整大小。然后，您可以允许您的用户使用您提到的方法“调整大小”，但前提是有必要。在单独的页面上执行此操作，并将 DPI 计算存储为用户 session 的一部分或作为 cookie。

或者，一旦 Microsoft 修复了 this bug ，您可以使用 Silverlight 的“与设备无关的单位”进行精确缩放。