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

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

原始答案

是。

window.screen.availHeight
window.screen.availWidth

更新 2017-11-10

来自海啸的评论：

要获得移动设备的原始分辨率，您必须乘以设备像素比率：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

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

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

window.screen.availHeight
window.screen.availWidth

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

window.screen.height
window.screen.width

上面两个都可以写而没有窗口前缀。

喜欢jQuery吗？这适用于所有浏览器，但是每个浏览器都提供不同的值。

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

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

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

由于计算机本身通常不知道屏幕的实际尺寸，而仅知道像素数，因此无法仅通过Javascript来了解显示分辨率。通常认为72 dpi ....

请注意，关于显示分辨率有很多困惑，通常人们使用术语而不是像素分辨率，但是两者有很大的不同。参见维基百科

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

使用jQuery，您可以执行以下操作：

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

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

为此，请使用： window.innerWidth 和 window.innerHeight属性。在w3schools上看到它。

例如，在大多数情况下，这是显示完美居中浮动模式对话框的最佳方法。无论使用哪种分辨率方向或窗口大小，都可以使用它来计算窗口上的位置。

尝试在移动设备上实现此功能需要更多步骤。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;
};

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

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

仅供将来参考：

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

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

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

以下是该插件的作者Ryan Van Etten的一些高分辨率文章：

• 存在2个单元集，并且它们以固定的比例不同：设备单元和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}
});