如何使用JavaScript检测屏幕分辨率？

Question

有没有适用于所有浏览器的方法？

- iceorangeblue

Answer 1

原始回答

是的。

window.screen.availHeight
window.screen.availWidth

更新2017-11-10

来自Tsunamis在评论中的内容：

为了获得移动设备的本机分辨率，您需要乘以设备像素比：window.screen.width * window.devicePixelRatio 和 window.screen.height * window.devicePixelRatio。这也适用于桌面设备，它们的比例是1。

还有来自Ben在另一个答案中的内容：

使用vanilla JavaScript，这将为您提供可用的宽度/高度：

window.screen.availHeight
window.screen.availWidth

对于绝对宽度/高度，请使用：

window.screen.height
window.screen.width

- John Weldon

---

现在它不是完全正确的。它没有考虑到页面缩放可能会发生变化。 - sergzach

在这种情况下，我会使用jQuery的$(window).width()，参见chaim.dev的答案。 - BornToCode

使用window.screen.height和window.screen.width获取准确的屏幕尺寸（如下一个答案所建议的）。之所以无法获得准确的尺寸是因为它检查的是可用的宽度和高度，这意味着它会减去工具栏高度（在Windows 7/8上正好为40px）。 - Jaruba

屏幕分辨率使用window.screen.height和width会不会更好呢？为什么要用availHeight？例如，我的availWidth返回1050，但实际上是1080。 - Malavos

你需要乘以 window.devicePixelRatio。请参考我在Alessandro回答下的评论。 - Tsunamis

Answer 2

var width = screen.width;
var height = screen.height;

- Alessandro

---

这相当于 window.screen。只需将其添加到现有答案中即可。 - Gajus

实际上，这是正确的答案。screen.availHeight只提供了浏览器窗口中可用的高度，而screen.height则提供了屏幕的确切高度。 - apnerve

这将返回经过dpi缩放的分辨率，而不是本机屏幕分辨率。 - Dominic Cerisano

要获得移动设备的原生分辨率，您需要使用设备像素比乘以屏幕宽度和高度。公式为 window.screen.width * window.devicePixelRatio 和 window.screen.height * window.devicePixelRatio。这个公式同样适用于桌面设备，其比值为1。 - Tsunamis

台式电脑不一定会有1的比率。 - 12Me21

Answer 3

在纯JavaScript中，这将为您提供可用的宽度/高度：

window.screen.availHeight
window.screen.availWidth

使用以下代码来设置元素的绝对宽度/高度：

```css width: 绝对值; height: 绝对值; ```

window.screen.height
window.screen.width

以上两种写法都可以不用添加window前缀。

像jQuery？它可以在所有浏览器中工作，但每个浏览器给出的值可能不同。

$(window).width()
$(window).height()

- Ben

Answer 4

你还可以获取窗口的宽度和高度，避免浏览器工具栏等因素影响（而不仅仅是屏幕尺寸）。

要实现这一点，请使用 window.innerWidth 和 window.innerHeight 属性。请参见 w3schools。

在大多数情况下，这将是最好的方式，例如，用于显示完美居中的浮动模态对话框。它允许您计算窗口上的位置，无论浏览器使用的分辨率方向或窗口大小如何。

- serfer2

---

这是最有用的解决方案。window.screen.availWidth属性提供的是屏幕而不是视口，两者可能不同。对我来说，了解实际可用的空间有多少更有用，而不是浏览器的最大值可能会变成什么样子。 - Mike Mannakee

唯一正确的答案 - Cybernetic

Answer 5

您是指显示分辨率（例如每英寸72个点）还是像素尺寸（浏览器窗口当前为1000 x 800像素）？

屏幕分辨率可以让您知道10个像素线在英寸中的厚度。像素尺寸告诉您一条水平线占用可用屏幕高度的百分比，该线宽度为10个像素。

由于计算机本身通常不知道屏幕的实际尺寸，只知道像素数量，因此无法仅通过Javascript了解显示分辨率。 72 dpi是通常的猜测值......

请注意，关于显示分辨率有很多混淆，人们经常使用该术语代替像素分辨率，但两者是完全不同的。请参见维基百科

当然，您也可以以每厘米的点数来衡量分辨率。还有非正方形点的晦涩主题。但我岔开了话题。

- Larry K

Answer 6

使用jQuery，你可以做到：

$(window).width()
$(window).height()

- chaim.dev

---

这是我使用过的最简单的跨平台/跨一切解决方案。对于至少浏览器宽度... - Zarne Dravitzki

这将返回窗口的大小，而不是屏幕分辨率。 - Jonas

Answer 7

尝试在移动设备上实现这一点需要更多的步骤。screen.availWidth无论设备的方向如何，都保持不变。

这是我为移动设备提供的解决方案:

function getOrientation(){
    return Math.abs(window.orientation) - 90 == 0 ? "landscape" : "portrait";
};
function getMobileWidth(){
    return getOrientation() == "landscape" ? screen.availHeight : screen.availWidth;
};
function getMobileHeight(){
    return getOrientation() == "landscape" ? screen.availWidth : screen.availHeight;
};

- posit labs

---

window.orientation 返回未定义...(Firefox 49) screen.orientation.angle 返回一个角度，但在横向模式下已经为0。 - Lambart

Answer 8

请参见使用JavaScript获取显示器屏幕分辨率和window.screen对象的文章和window.screen对象

- cletus

Answer 9

function getScreenWidth()
{
   var de = document.body.parentNode;
   var db = document.body;
   if(window.opera)return db.clientWidth;
   if (document.compatMode=='CSS1Compat') return de.clientWidth;
   else return db.clientWidth;
}

- Anabar

Answer 10

仅供将来参考：

function getscreenresolution()
{
    window.alert("Your screen resolution is: " + screen.height + 'x' + screen.width);
}

- daniel