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

【问题标题】：How to detect the screen resolution with JavaScript?如何使用 JavaScript 检测屏幕分辨率？
【发布时间】：2011-01-15 13:44:06
【问题描述】：

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

【问题讨论】：

标签： javascript screen-resolution

【解决方案1】：

原答案

是的。

window.screen.availHeight
window.screen.availWidth

更新 2017-11-10

来自 cmets 中的Tsunamis：

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

来自Ben的另一个答案：

在原生 JavaScript 中，这将为您提供可用的宽度/高度：
window.screen.availHeight
window.screen.availWidth
对于绝对宽度/高度，使用：
window.screen.height
window.screen.width

【讨论】：

现在不太正确。它不考虑页面缩放的可能变化。
@sergzach - 在这种情况下，我会使用 jQuery 的 $(window).width() 代替，请参阅 chaim.dev 的答案
使用 window.screen.height 和 window.screen.width 来获得准确的屏幕尺寸（在下一个答案中建议）。您没有得到确切大小的原因是它正在检查可用的宽度和高度，这意味着它将减去工具栏高度（在 Windows 7/8 上正好是 40px）
不会更好，屏幕分辨率与 window.screen.height 和 width 一起使用？为什么要使用高度？例如，我的availWidth 返回1050，而实际上是1080。
@eckes 你必须乘以window.devicePixelRatio。请参阅我对 Alessandros 答案的评论。

【解决方案2】：

见Get Monitor Screen Resolution with Javascript 和window.screen object

【讨论】：

【解决方案3】：

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

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

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

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

这相当于window.screen。应该将其添加到现有答案中。
其实这是正确的答案。 screen.availHeight 只是给出了浏览器窗口中的可用高度，而screen.height 给出了屏幕的确切高度。
这将返回 dpi 缩放分辨率，而不是原生屏幕分辨率。
要获得移动设备的原始分辨率，您必须乘以设备像素比：window.screen.width * window.devicePixelRatio 和 window.screen.height * window.devicePixelRatio。这也适用于比例为 1 的台式机。
台式机的比率不一定是 1。

【解决方案5】：

使用 jQuery 你可以做到：

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

【讨论】：

这是我用过的最简单的交叉/一切解决方案。至少对于浏览器宽度...
返回窗口大小，而不是屏幕分辨率。

【解决方案6】：

尝试在移动设备上获取此功能需要更多步骤。无论设备的方向如何，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;
};

【讨论】：

window.orientation 返回 undefined... (Firefox 49) screen.orientation.angle 返回一个角度，但对于横向模式它已经为 0。

【解决方案7】：

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

【讨论】：

【解决方案8】：

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

为此，请使用： window.innerWidth 和 window.innerHeight 属性。 See it at w3schools.

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

【讨论】：

这是最有用的解决方案。 window.screen.availWidth 属性给出的是 SCREEN，而不是视口，视口可能不同。知道我可以实际使用多少空间对我来说更有用，而不是浏览器的最大值可能/变成多少。

【解决方案9】：

在原生 JavaScript 中，这将为您提供 AVAILABLE 宽度/高度：

window.screen.availHeight
window.screen.availWidth

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

window.screen.height
window.screen.width

上面两个都可以不用window前缀写。

喜欢 jQuery？这适用于所有浏览器，但每个浏览器给出不同的值。

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

【讨论】：

【解决方案10】：

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

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

这里有一些很棒的resolution takeaways，来自插件作者 Ryan Van Etten：

存在 2 个单位集，并且以固定的比例存在差异：设备单位和 CSS 单位。
分辨率计算为可以沿特定 CSS 长度放置的点数。
单位换算：1⁢in = 2.54⁢cm = 96⁢px = 72⁢pt
CSS 有相对长度和绝对长度。正常缩放：1⁢em = 16⁢px
dppx 等价于 device-pixel-ratio。
devicePixelRatio 定义因平台而异。
媒体查询可以针对最小分辨率。使用时请注意速度。

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

!function(root, name, make) {
  if (typeof module != 'undefined' && module.exports) module.exports = make()
  else root[name] = make()
}(this, 'res', function() {

  var one = {dpi: 96, dpcm: 96 / 2.54}

  function ie() {
    return Math.sqrt(screen.deviceXDPI * screen.deviceYDPI) / one.dpi
  }

  function dppx() {
    // devicePixelRatio: Webkit (Chrome/Android/Safari), Opera (Presto 2.8+), FF 18+
    return typeof window == 'undefined' ? 0 : +window.devicePixelRatio || ie() || 0
  }

  function dpcm() {
    return dppx() * one.dpcm
  }

  function dpi() {
    return dppx() * one.dpi
  }

  return {'dppx': dppx, 'dpi': dpi, 'dpcm': dpcm}
});

【讨论】：

【解决方案11】：

仅供参考：

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

【讨论】：

【解决方案12】：

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

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

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

【讨论】：

【解决方案13】：

找到屏幕分辨率的简单步骤是：

复制

`My screen resolution is: ${window.screen.width} * ${window.screen.height}`

在浏览器控制台中粘贴
回车

【讨论】：