我想让我的访问者能够看到高质量的图像，有什么方法可以检测窗口的大小吗?
或者更好的是，JavaScript浏览器的视口大小?见此处绿色区域:
当前回答
此代码来自http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
function viewport() {
var e = window, a = 'inner';
if (!('innerWidth' in window )) {
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}
注意:要读取宽度，使用console.log('viewport width'+viewport().width);
其他回答
你可以用窗户。innerWidth和window。innerHeight属性。
符合W3C标准的解决方案是创建一个透明的div(例如使用JavaScript动态创建)，将其宽度和高度设置为100vw/100vh (Viewport单位)，然后获取其offsetWidth和offsetHeight。之后，可以再次删除该元素。这在较旧的浏览器中行不通，因为视口单元相对较新，但如果你不关心它们，而是关心(即将到来的)标准，你肯定可以这样做:
var objNode = document.createElement("div");
objNode.style.width = "100vw";
objNode.style.height = "100vh";
document.body.appendChild(objNode);
var intViewportWidth = objNode.offsetWidth;
var intViewportHeight = objNode.offsetHeight;
document.body.removeChild(objNode);
当然，你也可以设置objNode.style.position = "fixed"，然后使用100%作为宽度/高度——这应该有同样的效果，并在一定程度上提高兼容性。另外，一般来说，将位置设置为固定可能是一个好主意，因为否则div将是不可见的，但会消耗一些空间，这将导致出现滚动条等。
jQuery维函数
$(window).width()和$(window).height()
如果你正在使用React，那么在最新版本的React钩子中，你可以使用这个。
// Usage
function App() {
const size = useWindowSize();
return (
<div>
{size.width}px / {size.height}px
</div>
);
}
https://usehooks.com/useWindowSize/
您可以简单地使用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>
