我想让我的访问者能够看到高质量的图像，有什么方法可以检测窗口的大小吗?
或者更好的是，JavaScript浏览器的视口大小?见此处绿色区域:
当前回答
jQuery维函数
$(window).width()和$(window).height()
其他回答
我在O'Reilly的《JavaScript: The definitive Guide》第6版中找到了一个明确的答案，第391页:
这个解决方案即使在Quirks模式下也能工作，而ryanve和ScottEvernden目前的解决方案则不能。
function getViewportSize(w) {
// Use the specified window or the current window if no argument
w = w || window;
// This works for all browsers except IE8 and before
if (w.innerWidth != null) return { w: w.innerWidth, h: w.innerHeight };
// For IE (or any browser) in Standards mode
var d = w.document;
if (document.compatMode == "CSS1Compat")
return { w: d.documentElement.clientWidth,
h: d.documentElement.clientHeight };
// For browsers in Quirks mode
return { w: d.body.clientWidth, h: d.body.clientHeight };
}
除了我想知道为什么行if (document.compatMode == "CSS1Compat")不是if (d.compatMode == "CSS1Compat")，一切看起来都很好。
如果你不使用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>
应该是这样
let vw = document.documentElement.clientWidth;
let vh = document.documentElement.clientHeight;
理解viewport: https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts
上面链接的简写:viewport.moz.one
我已经建立了一个用于设备测试的网站:https://vp.moz.one
你可以用窗户。innerWidth和window。innerHeight属性。
