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

IT技术 javascript screen-resolution
2021-02-06 01:47:46

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

6个回答

原答案

是的。

window.screen.availHeight
window.screen.availWidth

更新2017-11-10

来自评论中的海啸

要获得 ie 移动设备的原始分辨率,您必须乘以设备像素比:window.screen.width * window.devicePixelRatiowindow.screen.height * window.devicePixelRatio这也适用于比率为 1 的台式机。

来自的另一个答案:

在 vanilla JavaScript 中,这将为您提供可用的宽度/高度:

window.screen.availHeight
window.screen.availWidth

对于绝对宽度/高度,请使用:

window.screen.height
window.screen.width
现在不太正确。它不考虑可能的页面缩放更改。
2021-03-12 01:47:46
@sergzach - 在这种情况下,我会使用 jQuery $(window).width(),请参阅 chaim.dev 的答案
2021-03-19 01:47:46
使用 window.screen.height 和 window.screen.width 获得确切的屏幕尺寸(如下一个答案中所建议)。您没有获得确切大小的原因是它正在检查可用的宽度和高度,这意味着它将减去工具栏的高度(在 Windows 7/8 上正好是 40px)
2021-03-28 01:47:46
@eckes 你必须乘以window.devicePixelRatio. 请参阅我对 Alessandros 回答的评论。
2021-03-29 01:47:46
不会更好,屏幕分辨率与 window.screen.height 和 width 一致吗?为什么可用高度?例如,我的 AvailWidth 返回 1050,而实际上是 1080。
2021-03-30 01:47:46
var width = screen.width;
var height = screen.height;
台式计算机的比率不一定为 1。
2021-03-21 01:47:46
其实这是正确的答案。screen.availHeight只给出浏览器窗口中的可用高度,同时screen.height给出屏幕的确切高度。
2021-03-23 01:47:46
这将返回 dpi 缩放分辨率,而不是原始屏幕分辨率。
2021-03-28 01:47:46
这相当于window.screen. 应该将其添加到现有答案中。
2021-04-06 01:47:46
要获得 ie 移动设备的原始分辨率,您必须乘以设备像素比:window.screen.width * window.devicePixelRatiowindow.screen.height * window.devicePixelRatio这也适用于比率为 1 的台式机。
2021-04-08 01:47:46

在 vanilla JavaScript 中,这将为您提供可用的宽度/高度:

window.screen.availHeight
window.screen.availWidth

对于绝对宽度/高度,请使用:

window.screen.height
window.screen.width

以上两种都可以不用window前缀来写。

像jQuery?这适用于所有浏览器,但每个浏览器给出不同的值。

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

您还可以获得 WINDOW 宽度和高度,避免浏览器工具栏和...(不仅仅是屏幕大小)。

为此,请使用: window.innerWidthwindow.innerHeight属性。在 w3schools 看到它

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

这是最有用的解决方案。window.screen.availWidth 属性给出了屏幕,而不是视口,视口可能不同。了解我实际可以使用多少不动产对我更有用,而不是浏览器的最大值可能是/变成什么。
2021-03-17 01:47:46

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

屏幕分辨率使您能够知道 10 像素线的粗细(以英寸为单位)。像素尺寸告诉您 10 像素宽的水平线将占据可用屏幕高度的百分比。

仅从 Javascript 无法知道显示分辨率,因为计算机本身通常不知道屏幕的实际尺寸,只知道像素数。72 dpi 是通常的猜测....

请注意,关于显示分辨率存在很多混淆,人们通常使用该术语而不是像素分辨率,但两者完全不同。参见维基百科

当然,您也可以用每厘米的点数来衡量分辨率。还有非方形点的晦涩主题。但我离题了。