我想让我的访问者能够看到高质量的图像，有什么方法可以检测窗口的大小吗?
或者更好的是，JavaScript浏览器的视口大小?见此处绿色区域:
当前回答
应该是这样
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
其他回答
您可以简单地使用JavaScript window.matchMedia()方法根据CSS媒体查询检测移动设备。这是检测移动设备的最佳和最可靠的方法。
下面的例子将告诉你这个方法是如何工作的:
<script>
$(document).ready(function(){
if(window.matchMedia("(max-width: 767px)").matches){
// The viewport is less than 768 pixels wide
alert("This is a mobile device.");
} else{
// The viewport is at least 768 pixels wide
alert("This is a tablet or desktop.");
}
});
</script>
我找到了一个跨浏览器的方法:
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
jQuery维函数
$(window).width()和$(window).height()
你可以使用 窗口。addEventListener('resize'，你的函数); 当窗口调整大小时，它将运行你的函数。 当你使用window的时候。innerWidth或document.documentElement.clientWidth它是只读的。 你可以在你的函数中使用if语句，使它更好。
