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

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

原来的答案

是。

window.screen.availHeight window.screen.availWidth 

更新 2017-11-10

来自海啸的评论:

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

而从本在另一个答案:

在香草JavaScript中,这会给你一个AVAILABLE宽度/高度:

 window.screen.availHeight window.screen.availWidth 

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

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

在香草JavaScript中,这会给你一个AVAILABLE宽度/高度:

 window.screen.availHeight window.screen.availWidth 

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

 window.screen.height window.screen.width 

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

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

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

使用jQuery你可以做到:

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

你的意思是显示分辨率(例如每英寸72点)或像素尺寸(浏览器窗口目前是1000×800像素)?

屏幕分辨率使您能够知道10英寸像素线的英寸厚度。 像素尺寸告诉你可用屏幕高度将占用10个像素宽的水平线的百分比。

由于计算机本身通常不知道屏幕的实际尺寸,只是像素的数量,所以无法从Javascript中知道显示分辨率。 72 dpi是通常的猜测….

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

当然,您也可以测量每厘米点的分辨率。 还有一个非正方形点的模糊主题。 但是我离题了。

试图在移动设备上获得这一点需要更多的步骤。 无论设备的方向如何, screen.availWidth保持不变。

这是我的手机解决scheme:

 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宽度和高度,避免浏览器工具栏和…(不只是屏幕大小)。

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

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

请参阅使用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; } 

如果你想检测屏幕分辨率,你可能想检查插件水库 。 它可以让你做到以下几点:

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

以下是来自插件作者Ryan Van Etten的一些很好的解决scheme :

  • 设备单位和CSS单位存在2个单位,并且固定比例不同。
  • 分辨率是根据特定CSS长度的点数来计算的。
  • 单位转换:1in = 2.54cm = 96px = 72pt
  • CSS有相对和绝对的长度。 在正常的缩放:1em = 16px
  • 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); }