使用javascript查找以英寸为单位的屏幕尺寸而不是像素答案

【问题标题】：find screen dimensions in inches not pixels using javascript使用javascript查找以英寸为单位的屏幕尺寸而不是像素
【发布时间】：2014-05-12 10:00:19
【问题描述】：

我在 SO 上阅读了许多关于检测屏幕尺寸（以像素为单位）的最佳方法的问题，这最终取决于分辨率以找到实际的屏幕尺寸。

我知道有些移动设备的屏幕很小（比如 4 英寸），但分辨率很高。虽然某些设备具有大屏幕（例如 7 英寸标签）但分辨率较低。

因此，当您想向用户显示您的页面时，您确实需要以英寸或厘米为单位的屏幕尺寸，以提供最舒适的视觉效果。

所以我问：是否可以找出设备的屏幕尺寸（以英寸而不是像素为单位）？我知道可以，只要我们知道解决方案！ !因为我们可以根据屏幕宽度和高度计算尺寸

欣赏任何想法！

【问题讨论】：

改用Media queries怎么样？
我真的讨厌、憎恶和憎恶那些不为理由辩护的投票者？
不明白为什么有人会投票反对。我也需要知道应用程序的实际屏幕尺寸和分辨率 (PPI)。看不到如何为此使用媒体查询。据我了解，媒体查询可以做出有条件的 CSS 选择，但这并不能告诉你实际的分辨率，例如。也就是说，如果 CSS 引擎能够知道分辨率是大于还是小于某个数字，它就有办法知道实际的分辨率是多少。我们应该能够访问相同的信息，但是如何？？？

【解决方案1】：

一旦你得到了以像素为单位的屏幕分辨率，你就可以用隐藏的 div 计算出 dpi：

<div id="dpi" style="height: 1in; width: 1in; left: 100%; position: fixed; top: 100%;"></div>

var dpi_x = document.getElementById('dpi').offsetWidth;
var dpi_y = document.getElementById('dpi').offsetHeight;

然后以英寸为单位计算分辨率：

var width = screen.width / dpi_x;
var height = screen.height / dpi_y;

【讨论】：

您的回答非常好，我会接受，但 jsfiddle 给了我关于屏幕尺寸的不准确数字
我想知道screen.width 是否适用于手机/平板电脑，因为它似乎适用于大多数台式机
CSS 大小以绝对单位（英寸/厘米）仅在打印机上受支持——规范还指出，它们应该与“高分辨率显示器”上的实际对应物相对应，但我们肯定有这些在 2018 年，他们绝对不会在实践中真正排队。
对不起，这仍然不好看。我的 2019 款 15 英寸 MacBook Pro 显示浏览器窗口的 x/y 为 17.5/10.9375 - 甚至没有关闭。
这会返回错误的答案，因为它是基于分辨率的！它认出我的 24 英寸显示器和 42 英寸电视是一样的！

【解决方案2】：

现在，据我所知，没有可靠的方法来准确获取设备的屏幕宽度。一切（包括英寸，1in == 96px）都以一种或另一种方式基于屏幕分辨率。

现在，我知道这可能无法解决所有人的问题，但希望它可以帮助一些人。它帮助了我，因为我希望我的页面对移动用户有不同的表现，而且我最初的攻击计划将基于屏幕大小。

我最终做的是替换行

if (screen.height <= 768)

与

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent))

作为免责声明，我还应该提到这是来自几年前的答案，因此可能未涵盖某些设备。

【讨论】：