如何使用 JavaScript 检测屏幕分辨率？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2242086/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to detect the screen resolution with JavaScript?
提问by John Weldon
Is there a way that works for all browsers?
有没有适用于所有浏览器的方法？
回答by John Weldon
original answer
原答案
Yes.
是的。
window.screen.availHeight
window.screen.availWidth
update2017-11-10
更新2017-11-10
From Tsunamisin the comments:
来自评论中的海啸：
To get the native resolution of i.e. a mobile device you have to multiply with the device pixel ratio:
window.screen.width * window.devicePixelRatioandwindow.screen.height * window.devicePixelRatio. This will also work on desktops, which will have a ratio of 1.
要获得 ie 移动设备的原始分辨率，您必须乘以设备像素比：
window.screen.width * window.devicePixelRatio和window.screen.height * window.devicePixelRatio。这也适用于比率为 1 的台式机。
And from Benin another answer:
来自本的另一个答案：
In vanilla JavaScript, this will give you the AVAILABLE width/height:
window.screen.availHeight window.screen.availWidthFor the absolute width/height, use:
window.screen.height window.screen.width
在 vanilla JavaScript 中，这将为您提供可用的宽度/高度：
window.screen.availHeight window.screen.availWidth对于绝对宽度/高度，请使用：
window.screen.height window.screen.width
回答by Alessandro
var width = screen.width;
var height = screen.height;
回答by Ben
In vanilla JavaScript, this will give you the AVAILABLEwidth/height:
在 vanilla JavaScript 中，这将为您提供可用的宽度/高度：
window.screen.availHeight
window.screen.availWidth
For the absolute width/height, use:
对于绝对宽度/高度，请使用：
window.screen.height
window.screen.width
Both of the above can be written without the window prefix.
以上两种都可以不用窗口前缀来写。
Like jQuery? This works in all browsers, but each browser gives different values.
像jQuery？这适用于所有浏览器，但每个浏览器给出不同的值。
$(window).width()
$(window).height()
回答by serfer2
You can also get the WINDOW width and height, avoiding browser toolbars and... (not just screen size).
您还可以获得 WINDOW 宽度和高度，避免浏览器工具栏和...（不仅仅是屏幕大小）。
To do this, use:
window.innerWidthand window.innerHeightproperties. See it at w3schools.
为此，请使用：
window.innerWidth和 window.innerHeight属性。在 w3schools 看到它。
In most cases it will be the best way, in example, to display a perfectly centred floating modal dialog. It allows you to calculate positions on window, no matter which resolution orientation or window size is using the browser.
在大多数情况下，这将是最好的方式，例如，显示一个完美居中的浮动模态对话框。它允许您计算窗口上的位置，无论浏览器使用的是哪种分辨率方向或窗口大小。
回答by chaim.dev
Using jQuery you can do:
使用 jQuery，您可以执行以下操作：
$(window).width()
$(window).height()
回答by Larry K
Do you mean display resolution (eg 72 dots per inch) or pixel dimensions (browser window is currently 1000 x 800 pixels)?
您是指显示分辨率（例如每英寸 72 点）还是像素尺寸（浏览器窗口当前为 1000 x 800 像素）？
Screen resolution enables you to know how thick a 10 pixel line will be in inches. Pixel dimensions tell you what percentage of the available screen height will be taken up by a 10 pixel wide horizontal line.
屏幕分辨率使您能够知道 10 像素线的粗细（以英寸为单位）。像素尺寸告诉您 10 像素宽的水平线将占据可用屏幕高度的多少百分比。
There's no way to know the display resolution just from Javascript since the computer itself usually doesn't know the actual dimensions of the screen, just the number of pixels. 72 dpi is the usual guess....
仅从 Javascript 无法知道显示分辨率，因为计算机本身通常不知道屏幕的实际尺寸，只知道像素数。72 dpi 是通常的猜测....
Note that there's a lot of confusion about display resolution, often people use the term instead of pixel resolution, but the two are quite different. See Wikipedia
请注意，关于显示分辨率存在很多混淆，人们通常使用该术语而不是像素分辨率，但两者完全不同。参见维基百科
Of course, you can also measure resolution in dots per cm. There is also the obscure subject of non-square dots. But I digress.
当然，您也可以用每厘米的点数来衡量分辨率。还有非方形点的晦涩主题。但我离题了。
回答by posit labs
Trying to get this on a mobile device requires a few more steps. screen.availWidthstays the same regardless of the orientation of the device.
尝试在移动设备上获得此功能需要更多步骤。screen.availWidth无论设备的方向如何，都保持不变。
Here is my solution for mobile:
这是我的移动解决方案：
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;
};
回答by cletus
回答by Anabar
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;
}
回答by daniel
just for future reference:
仅供参考：
function getscreenresolution()
{
window.alert("Your screen resolution is: " + screen.height + 'x' + screen.width);
}
