有没有适用于所有浏览器的方法?
13 回答
原始答案
是的。
window.screen.availHeight
window.screen.availWidth
更新2017-11-10
来自评论中的海啸:
要获得即移动设备的原始分辨率,您必须乘以设备像素比:
window.screen.width * window.devicePixelRatio
和window.screen.height * window.devicePixelRatio
。这也适用于比率为 1 的台式机。
Ben在另一个答案中:
在 vanilla JavaScript 中,这将为您提供可用的宽度/高度:
window.screen.availHeight window.screen.availWidth
对于绝对宽度/高度,请使用:
window.screen.height window.screen.width
var width = screen.width;
var height = screen.height;
在 vanilla JavaScript 中,这将为您提供可用的宽度/高度:
window.screen.availHeight
window.screen.availWidth
对于绝对宽度/高度,请使用:
window.screen.height
window.screen.width
上面两个都可以不用window前缀来写。
喜欢 jQuery 吗?这适用于所有浏览器,但每个浏览器给出不同的值。
$(window).width()
$(window).height()
您还可以获得 WINDOW 的宽度和高度,避免使用浏览器工具栏和...(不仅仅是屏幕大小)。
为此,请使用:
window.innerWidth
和 window.innerHeight
属性。在 w3schools 看到它。
在大多数情况下,这将是最好的方式,例如,显示一个完美居中的浮动模式对话框。它允许您计算窗口上的位置,无论使用浏览器的分辨率方向或窗口大小。
您是指显示分辨率(例如每英寸 72 点)还是像素尺寸(浏览器窗口当前为 1000 x 800 像素)?
屏幕分辨率使您能够知道 10 像素线的粗细(以英寸为单位)。像素尺寸告诉您 10 像素宽的水平线将占据可用屏幕高度的百分比。
仅从 Javascript 无法知道显示分辨率,因为计算机本身通常不知道屏幕的实际尺寸,只知道像素数。72 dpi 是通常的猜测....
请注意,关于显示分辨率有很多混淆,人们经常使用术语而不是像素分辨率,但两者完全不同。见维基百科
当然,您也可以测量每厘米点数的分辨率。还有非方点的晦涩主题。但我离题了。
使用 jQuery,您可以执行以下操作:
$(window).width()
$(window).height()
尝试在移动设备上实现这一点需要更多步骤。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 长度拟合的点数。
- 单位换算: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}
});
如果您的意思是浏览器分辨率,那么
window.innerWidth为您提供浏览器分辨率
您可以使用http://howbigismybrowser.com/进行测试 尝试通过放大/缩小浏览器来更改屏幕分辨率并使用http://howbigismybrowser.com/ 检查分辨率大小 Window.innerWidth 应该与屏幕分辨率宽度相同
查找屏幕分辨率的简单步骤是:
- 复制
`My screen resolution is: ${window.screen.width} * ${window.screen.height}`
- 粘贴到浏览器控制台
- 点击进入