是否有一种方法适用于所有浏览器?
原来的答案
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
你是指显示分辨率(例如72点每英寸)还是像素尺寸(浏览器窗口目前是1000 x 800像素)?
屏幕分辨率可以让你知道10像素的线有多粗,单位是英寸。像素尺寸告诉你可用屏幕高度的百分比将被10像素宽的水平线所占据。
仅通过Javascript无法知道显示分辨率,因为计算机本身通常不知道屏幕的实际尺寸,只知道像素的数量。72 dpi是通常的猜测....
请注意,关于显示分辨率有很多困惑,人们经常使用这个术语而不是像素分辨率,但这两者是非常不同的。看到维基百科
当然,你也可以用点/厘米来测量分辨率。还有一个令人费解的非方形圆点问题。但我离题了。
想要在移动设备上实现这个功能需要更多的步骤。屏幕上。不管设备的方向如何,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;
};
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;
}
您还可以获得窗口宽度和高度,避免浏览器工具栏和…(不仅仅是屏幕大小)。
要做到这一点,请使用: 窗口。innerWidth和window。innerHeight属性。详见w3schools。
在大多数情况下,这将是最好的方式,例如,显示一个完美的中心浮动模式对话框。它允许您计算窗口上的位置,无论使用浏览器的分辨率方向或窗口大小。
在JavaScript中,这将为你提供可用的宽度/高度:
window.screen.availHeight
window.screen.availWidth
对于绝对宽度/高度,使用:
window.screen.height
window.screen.width
上面两个代码都可以在没有窗口前缀的情况下编写。
喜欢jQuery吗?这适用于所有浏览器,但每个浏览器给出不同的值。
$(window).width()
$(window).height()
如果你想检测屏幕分辨率,你可能想要签出插件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}
});
只是为了将来参考:
function getscreenresolution()
{
window.alert("Your screen resolution is: " + screen.height + 'x' + screen.width);
}
如果你指的是浏览器分辨率的话
窗口。innerWidth为您提供浏览器分辨率
您可以使用http://howbigismybrowser.com/进行测试 尝试通过放大/缩小浏览器来改变屏幕分辨率,并使用http://howbigismybrowser.com/检查分辨率大小 窗口。innerWidth应该与屏幕分辨率宽度相同
找到屏幕分辨率的简单步骤是:
复制
`My screen resolution is: ${window.screen.width} * ${window.screen.height}`
粘贴到浏览器控制台 回车
推荐文章
- 如何使用Jest测试对象键和值是否相等?
- 将长模板文字行换行为多行,而无需在字符串中创建新行
- 如何在JavaScript中映射/减少/过滤一个集?
- Bower: ENOGIT Git未安装或不在PATH中
- 添加javascript选项选择
- 在Node.js中克隆对象
- 为什么在JavaScript的Date构造函数中month参数的范围从0到11 ?
- 使用JavaScript更改URL参数并指定默认值
- 在window.setTimeout()发生之前取消/终止
- 如何删除未定义和空值从一个对象使用lodash?
- 检测当用户滚动到底部的div与jQuery
- 在JavaScript中检查字符串包含另一个子字符串的最快方法?
- 检测视口方向,如果方向是纵向显示警告消息通知用户的指示
- ASP。NET MVC 3 Razor:在head标签中包含JavaScript文件
- 禁用从HTML页面中拖动图像