229

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

4

13 回答 13

347

原始答案

是的。

window.screen.availHeight
window.screen.availWidth

更新2017-11-10

来自评论中的海啸

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

Ben在另一个答案中:

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

window.screen.availHeight
window.screen.availWidth

对于绝对宽度/高度,请使用:

window.screen.height
window.screen.width
于 2010-02-11T03:39:27.140 回答
54
var width = screen.width;
var height = screen.height;
于 2012-10-11T19:19:01.367 回答
36

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

window.screen.availHeight
window.screen.availWidth

对于绝对宽度/高度,请使用:

window.screen.height
window.screen.width

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

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

$(window).width()
$(window).height()
于 2014-08-31T23:12:14.707 回答
23

您还可以获得 WINDOW 的宽度和高度,避免使用浏览器工具栏和...(不仅仅是屏幕大小)。

为此,请使用: window.innerWidthwindow.innerHeight属性。在 w3schools 看到它

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

于 2014-08-21T10:38:07.743 回答
21

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

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

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

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

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

于 2010-02-11T03:51:02.130 回答
18

使用 jQuery,您可以执行以下操作:

$(window).width()
$(window).height()
于 2013-03-04T15:41:10.907 回答
13

尝试在移动设备上实现这一点需要更多步骤。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;
};
于 2013-10-10T07:32:10.500 回答
7

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

于 2010-02-11T03:40:25.773 回答
4
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;
}
于 2014-03-03T07:49:16.073 回答
4

仅供将来参考:

function getscreenresolution()
{
    window.alert("Your screen resolution is: " + screen.height + 'x' + screen.width);
}
于 2017-03-01T15:46:49.230 回答
3

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

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

以下是插件作者 Ryan Van Etten的一些出色的解决方案:

  • 存在 2 个单位集,并且以固定的比例存在差异:设备单位和 CSS 单位。
  • 分辨率计算为可以沿特定 CSS 长度拟合的点数。
  • 单位换算:1⁢in = 2.54⁢cm = 96⁢px = 72⁢pt
  • 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}
});
于 2016-11-26T19:42:50.423 回答
0

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

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

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

于 2020-07-30T20:53:53.570 回答
0

查找屏幕分辨率的简单步骤是:

  • 复制
`My screen resolution is: ${window.screen.width} * ${window.screen.height}`
  • 粘贴到浏览器控制台
  • 点击进入
于 2021-12-13T15:07:38.347 回答