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

Question

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

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

Answer 2

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

Answer 3

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

window.screen.availHeight
window.screen.availWidth

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

window.screen.height
window.screen.width

以上两者都可以在没有窗口前缀的情况下编写.

喜欢jQuery？这适用于所有浏览器,但每个浏览器都提供不同的值.

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

Answer 4

你的意思是显示分辨率(例如每英寸72点)或像素尺寸(浏览器窗口目前是1000 x 800像素)？

通过屏幕分辨率,您可以了解10像素线的英寸厚度.像素尺寸可以告诉您10像素宽水平线占据可用屏幕高度的百分比.

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

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

当然,您也可以测量每厘米点数的分辨率.还有一个非方形点的模糊主题.但我离题了.

Answer 5

使用jQuery,您可以:

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

Answer 6

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

为此,请使用: window.innerWidth 和 window.innerHeightproperties.在w3schools看到它.

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

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;
};

Answer 8

请参阅使用Javascript和对象获取监视器屏幕分辨率window.screen