我想让我的访问者能够看到高质量的图像，有什么方法可以检测窗口大小吗？
或者更好的是，使用 JavaScript 的浏览器的视口大小？在此处查看绿色区域：
如何获取浏览器视口尺寸？
IT技术
javascript
cross-browser
viewport
2021-02-03 04:47:56
6个回答
跨浏览器 @media (width)和@media (height)值
const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
window.innerWidth 和 window.innerHeight
- 获取CSS 视口
@media (width)并@media (height)包含滚动条 initial-scale和缩放变化可能会导致移动值错误地缩小到 PPK 所谓的视觉视口并小于这些@media值- 由于本机舍入，缩放可能会导致值偏离 1px
undefined在 IE8-
document.documentElement.clientWidth 和 .clientHeight
- 等于 CSS 视口宽度减去滚动条宽度
- 匹配
@media (width)并@media (height)时有没有滚动条 - 同
jQuery(window).width()它的jQuery 调用浏览器窗口 - 可用的跨浏览器
- 如果缺少 doctype 则不准确
资源
$(window).width() 和 $(window).height()
您可以使用window.innerWidth和window.innerHeight属性。
如果你不使用 jQuery，它会变得丑陋。这是一个应该适用于所有新浏览器的代码段。IE 中的 Quirks 模式和标准模式下的行为不同。这会照顾它。
var elem = (document.compatMode === "CSS1Compat") ?
document.documentElement :
document.body;
var height = elem.clientHeight;
var width = elem.clientWidth;
我查看并找到了一种跨浏览器的方式：
function myFunction(){
if(window.innerWidth !== undefined && window.innerHeight !== undefined) {
var w = window.innerWidth;
var h = window.innerHeight;
} else {
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
}
var txt = "Page size: width=" + w + ", height=" + h;
document.getElementById("demo").innerHTML = txt;
}<!DOCTYPE html>
<html>
<body onresize="myFunction()" onload="myFunction()">
<p>
Try to resize the page.
</p>
<p id="demo">
</p>
</body>
</html>