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

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

原始答案

对

更新2017-11-10

从评论中可以看出：

---

要获得移动设备的本机分辨率，您必须乘以设备像素比率：

window.screen.width*window.devicePixelRatio

和

window.screen.height*window.devicePixelRatio

。这也适用于台式机，其比率为1

从另一个答案来看：

---

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

window.screen.availHeight
window.screen.availWidth

window.screen.availHeight
window.screen.availWidth

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

window.screen.height
window.screen.width

window.screen.height
window.screen.width

---

请参阅和

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

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

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

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

---

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

使用jQuery，您可以：

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

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

---

要想在移动设备上实现这一点，还需要几个步骤<代码>屏幕。无论设备的方向如何，可用宽度保持不变

以下是我的移动解决方案：

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.innerWidth

和

window.innerHeight

properties

---

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

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

window.screen.availHeight
window.screen.availWidth

window.screen.availHeight
window.screen.availWidth

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

window.screen.height
window.screen.width

window.screen.height
window.screen.width

以上两种都可以在不使用窗口前缀的情况下写入

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

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

---

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

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

以下是插件作者Ryan Van Etten的一些精彩作品：

• 存在两个单位集，它们以固定的比例不同：设备单位和CSS单位
• 分辨率计算为沿特定CSS长度可容纳的点数
• 单位换算：1英寸=2.54厘米=96像素=72像素
• CSS有相对长度和绝对长度。在正常缩放中：1⁢em=16⁢px
• dppx相当于设备像素比
• 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}
});

---

仅供将来参考：

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

---

如果你是指浏览器分辨率，那么

窗口。innerWidth提供浏览器分辨率

您可以使用 尝试通过放大/缩小浏览器更改屏幕分辨率，并使用检查分辨率大小

---

Window.innerWidth应该与屏幕分辨率宽度相同

现在不太正确。它不考虑页面缩放的可能更改。@ SergZHAC-在这种情况下，我将使用jQuery的代码> $（window）.WistHe（）/Cord>，参见哈伊姆。DeV的回答使用Window .Studio .Health.Window .Studio .Wrand，以获得屏幕尺寸（如下一个答案中所建议的）。您没有得到确切大小的原因是它正在检查可用的宽度和高度，这意味着它将减去工具栏高度（在windows 7/8上正好是40px）不会更好，因为屏幕分辨率与window.screen.height和width匹配？为什么这么高？例如，我的availWidth返回1050，而实际上是1080。@eckes您必须使用

window.devicePixelRatio

相乘。参考我对Alessandros答案的评论。这是我使用过的最简单的交叉/一切解决方案。对于浏览器宽度至少…这返回窗口的大小，而不是屏幕分辨率。这相当于

window.screen

。应该把它加到现有的答案中。实际上这是正确的答案

screen.availHeight

仅给出浏览器窗口中的可用高度，而

screen.height

给出屏幕的确切高度。这将返回dpi缩放分辨率，不是本机屏幕分辨率。要获得移动设备的本机分辨率，必须乘以设备像素比率：

window.screen.width*window.devicePixelRatio

和

window.screen.height*window.devicePixelRatio

。这也适用于台式机，其比率为1。台式机的比率不一定为1。

window.orientation

返回未定义的。。。（Firefox 49）

screen.orientation.angle

返回一个角度，但在横向模式下它已经为0。这是最有用的解决方案。window.screen.availWidth属性提供的是屏幕，而不是视口，可能会有所不同。对我来说，更有用的是知道我可以实际使用多少不动产，而不是浏览器的最大值可能是多少。