应该是这样

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

符合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()

你可以使用 窗口。addEventListener('resize'，你的函数); 当窗口调整大小时，它将运行你的函数。 当你使用window的时候。innerWidth或document.documentElement.clientWidth它是只读的。 你可以在你的函数中使用if语句，使它更好。

您可以简单地使用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>

我在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")，一切看起来都很好。