使用JavaScript查找屏幕尺寸（英寸为单位，而非像素）

Question

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

我知道一些移动设备具有小屏幕（例如4英寸），但分辨率很高。而有些设备则具有大屏幕（例如7英寸平板电脑），但分辨率很低。

因此，当您想要向用户显示页面时，您真正需要的是英寸或厘米的屏幕尺寸，以便为眼睛提供最佳的视觉效果。

所以，我问： 有没有办法找出设备的屏幕尺寸而不是像素？ 我知道这是可以的，前提是我们知道分辨率！因为我们可以通过屏幕宽度和高度计算尺寸。

欢迎任何想法！

- stackunderflow

---

使用媒体查询怎么样？ - Teemu

我非常讨厌那些没有解释原因却给我负评的人。 - stackunderflow

不明白为什么会有人投反对票。我也需要知道一个应用程序的实际屏幕尺寸和分辨率（PPI）。不知道如何使用媒体查询来实现这一点。据我理解，媒体查询可以进行条件CSS选择，但这并不能告诉你实际的分辨率。话虽如此，如果CSS引擎能够知道分辨率是大于还是小于某个数字，那么它就有了了解实际分辨率的方法。我们应该能够访问相同的信息，但是怎么做呢？ - Scott Witte

Answer 1

一旦你获得了屏幕分辨率（以像素为单位），你可以通过一个隐藏的div来计算dpi：

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

JavaScript

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;

例子

- Pete

---

你的回答非常好，我会接受它，但是 jsfiddle 给出了关于我的屏幕尺寸不准确的数字。 - stackunderflow

我不确定，但我认为通过将上述计算得出的值除以window.devicePixelRatio可以获得更准确的以英寸为单位的width和height。如果我错了，请纠正我。 - Arup Hore

CSS中的绝对单位尺寸（英寸/厘米）仅在打印机上受支持。规范还声明它们应该与“高分辨率显示器”上的真实对应物相一致，但我们在2018年已经有这样的高分辨率显示器了，实践中它们确实并不一致。 - Coderer

抱歉，这个看起来仍然不太好。我的2019款15英寸MacBook Pro显示浏览器窗口的x/y坐标是17.5/10.9375 - 相差甚远。 - Raymond Naseef

这会返回错误的答案，因为它基于分辨率！它将我的24英寸显示器和42英寸电视识别为相同的设备！ - Mohammad Moallemi

Answer 2

现在，据我所知，没有一种确定的方法可以准确地获取设备屏幕宽度。所有东西（包括英寸，1英寸==96像素）都基于屏幕分辨率。希望这可以帮助到一些人，尽管这可能不是每个人的解决方案。对我来说很有帮助，因为我想让我的页面针对移动用户表现出不同的行为，而我的最初计划是基于屏幕大小。我最终做的是替换了这一行：

if (screen.height <= 768)

使用

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

作为免责声明，我应该提到这是几年前的答案，因此可能没有涵盖所有设备。

来源：https://dev59.com/MWw15IYBdhLWcg3wWqf-#26577897

- Kyle Wilson