是否有一种方法适用于所有浏览器?
当前回答
想要在移动设备上实现这个功能需要更多的步骤。屏幕上。不管设备的方向如何,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;
};
其他回答
原来的答案
Yes.
window.screen.availHeight
window.screen.availWidth
更新2017-11-10
来自海啸的评论:
为了获得移动设备的原生分辨率,你必须与设备像素比相乘:window.screen.width * window.devicePixelRatio和window.screen.height * window.devicePixelRatio。这也适用于桌面,桌面的比率为1。
本的另一个回答是:
在JavaScript中,这将为你提供可用的宽度/高度: window.screen.availHeight window.screen.availWidth 对于绝对宽度/高度,使用: window.screen.height window.screen.width
var width = screen.width;
var height = screen.height;
如果你指的是浏览器分辨率的话
窗口。innerWidth为您提供浏览器分辨率
您可以使用http://howbigismybrowser.com/进行测试 尝试通过放大/缩小浏览器来改变屏幕分辨率,并使用http://howbigismybrowser.com/检查分辨率大小 窗口。innerWidth应该与屏幕分辨率宽度相同
如果你想检测屏幕分辨率,你可能想要签出插件res。它允许你做以下事情:
var res = require('res')
res.dppx() // 1
res.dpi() // 96
res.dpcm() // 37.79527559055118
下面是插件作者Ryan Van Etten提供的一些很棒的解决方案:
存在两种固定规模的单元集:设备单元和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}
});
使用jQuery,你可以做到:
$(window).width()
$(window).height()
推荐文章
- 给一个数字加上st, nd, rd和th(序数)后缀
- 如何以编程方式触发引导模式?
- setTimeout带引号和不带括号的区别
- 在JS的Chrome CPU配置文件中,'self'和'total'之间的差异
- 用javascript检查输入字符串中是否包含数字
- 如何使用JavaScript分割逗号分隔字符串?
- 在Javascript中~~(“双波浪号”)做什么?
- 谷歌chrome扩展::console.log()从后台页面?
- 未捕获的SyntaxError:
- [].slice的解释。调用javascript?
- jQuery日期/时间选择器
- 我如何预填充一个jQuery Datepicker文本框与今天的日期?
- 数组的indexOf函数和findIndex函数的区别
- jQuery添加必要的输入字段
- Access-Control-Allow-Origin不允许Origin < Origin >