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中，这将为您提供AVAILABLE宽度/高度：
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中，这将为您提供 AVAILABLE 宽度/高度：

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是通常的猜测......

请注意，显示分辨率存在很多混淆，通常人们使用术语而不是像素分辨率，但两者完全不同。见Wikipedia

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

Answer 5

使用jQuery，您可以：

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

Answer 6

您还可以获取WINDOW的宽度和高度，避免浏览器工具栏和...（不仅仅是屏幕尺寸）。

为此，请使用： window.innerWidth和window.innerHeight属性。 See it at 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

请参阅Get Monitor Screen Resolution with Javascript和window.screen object

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

Answer 10

仅供将来参考：

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

Answer 11

如果要检测屏幕分辨率，可能需要检查插件res。它允许您执行以下操作：

sizes

以下是来自插件作者Ryan Van Etten的精彩resolution takeaways：

存在2个单位集，并且以固定比例不同：设备单位和CSS单位。
分辨率计算为可以适合特定CSS长度的点数。
单位转换：1in = 2.54cm = 96pp = 72pt
CSS具有相对和绝对长度。在正常缩放：1em = 16px
dppx相当于设备像素比。
devicePixelRatio定义因平台而异。
媒体查询可以定位最小分辨率。请小心使用。

这里是res的源代码，截至今天：

var res = require('res')
res.dppx() // 1
res.dpi() // 96
res.dpcm() // 37.79527559055118

Answer 12

如果您的意思是浏览器分辨率，那么

window.innerWidth 为您提供浏览器分辨率

您可以使用http://howbigismybrowser.com/进行测试尝试通过放大/缩小浏览器来更改屏幕分辨率，并使用http://howbigismybrowser.com/检查分辨率大小 Window.innerWidth应与屏幕分辨率宽度相同

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

12 个答案: