window.innerWidth 在 Chrome 的设备模式下

Question

在googlechrome的设备模式下，window.innerWidthreturn是什么意思？是设备的视口（加上任何滚动条）吗？

我得到了不同的设备宽 x 高值（页面顶部的尺寸 - 设备的视口？）和 window.innerWidth x window.innerHeight（浏览器的视口？）。这是应该发生的吗？

这是我得到的图片以及我使用的代码。

<!doctype html>
<html>
<head></head>
<body>
<script>
var image;

window.onload = function() {
  image = document.getElementById("img");
  checkWindowSize();
  window.addEventListener('resize', function(event){
    checkWindowSize();
  });
}

function checkWindowSize() {
  var width = window.innerWidth,
      height = window.innerHeight;

  console.log("window.innerHeight: ", window.innerHeight, " window.innerWidth: ", window.innerWidth);
}
</script>

<img id="img" class="vid-img-filter" src="http://i.imgur.com/jkhFJMn.jpg" alt="">
</body>
</html>

Answer 1

window.innerWidth 和 innerHeight return 视觉视口的尺寸。在桌面浏览器中，这通常是浏览器的 window 尺寸。在手机上，由于双指缩放，情况有点复杂。

当您加载没有 <meta name="viewport"> 标签的页面时，将使用默认布局宽度（例如 Chrome 使用 980px）。当浏览器加载页面时，它会最大程度地缩小。看起来您上面的设备尺寸的宽度为 425 像素，因此浏览器会在加载页面时缩小以查看整个 980 像素。如果您有比这更宽的内容（例如您的图像），它会进一步缩小。看看你的 window.innerWidth 是 1248，这意味着比例因子约为 30%。

tl;dr：innerWidth/innerHeight 反映视口应用了双指缩放因子并且页面加载完全缩小。

编辑：这在 Chrome 中发生了变化。 window.innerWidth 现在 return 是 布局视口 宽度。要获取视觉视口宽度，请使用 window.visualViewport.width。有关详细信息，请参阅 this article。

Answer 2

我不确定这是否是最近的更新（自上次回复以来），但我能够通过以下方式找到视口 height/width：

window.screen.width

和

window.screen.height

这在我尝试测试屏幕是否 phone-sized 时特别有用。

Answer 3

我们目前在以下方面取得了成功：

    const widths = [window.innerWidth];

    if (window.screen?.width) {
      widths.push(window.screen?.width);
    }

    const width = Math.min(...widths);

有条件检查是因为我不确定屏幕宽度 API 有多广泛。您可能需要调整此选项以不使用某些较新的 JS 功能，具体取决于您使用的设备 targeting/your 构建过程。

如果您的 window 比屏幕宽，这可能会有点奇怪，但对我们来说这不是问题。

这为我们提供了一个与响应式屏幕工具顶部的宽度相匹配的宽度，即使内容水平溢出也是如此。这对我们很重要，因为我们需要更改 UI 以防止溢出，但溢出干扰了我们用来触发调整的宽度数字。

我不确定这是否重要，但我们也在使用：

<meta name="viewport" content="width=device-width, initial-scale=1" />

window.innerWidth 在 Chrome 的设备模式下

window.innerWidth in Chrome's device mode

mobile

google-chrome

viewport