应该是这样

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>

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

窗户和窗户是有区别的。innerHeight和document.documentElement.clientHeight。第一个包括水平滚动条的高度。

如果你不使用jQuery，它会变得很难看。下面是一个可以在所有新浏览器上运行的代码片段。在IE的Quirks模式和标准模式下，行为是不同的。这就搞定了。

var elem = (document.compatMode === "CSS1Compat") ? 
    document.documentElement :
    document.body;

var height = elem.clientHeight;
var width = elem.clientWidth;

这是我做的方式，我在IE 8 -> 10, FF 35, Chrome 40中尝试过，它将在所有现代浏览器(作为窗口)中工作得非常流畅。innerWidth是定义的)，在IE 8(没有window.innerWidth)，它工作顺利，任何问题(如闪烁，因为溢出:“隐藏”)，请报告它。我不是真的对视口高度感兴趣，因为我做这个函数只是为了解决一些响应工具，但它可能会被实现。希望它能有所帮助，我感谢评论和建议。

function viewportWidth () {
  if (window.innerWidth) return window.innerWidth;
  var
  doc = document,
  html = doc && doc.documentElement,
  body = doc && (doc.body || doc.getElementsByTagName("body")[0]),
  getWidth = function (elm) {
    if (!elm) return 0;
    var setOverflow = function (style, value) {
      var oldValue = style.overflow;
      style.overflow = value;
      return oldValue || "";
    }, style = elm.style, oldValue = setOverflow(style, "hidden"), width = elm.clientWidth || 0;
    setOverflow(style, oldValue);
    return width;
  };
  return Math.max(
    getWidth(html),
    getWidth(body)
  );
}