Chrome 设备模式下的 window.innerWidth答案

【问题标题】：window.innerWidth in Chrome's device modeChrome 设备模式下的 window.innerWidth
【发布时间】：2016-07-17 19:03:49
【问题描述】：

在谷歌浏览器的设备模式下，window.innerWidth 返回什么？它是设备的视口（加上任何滚动条）吗？

我得到了设备的宽度 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>

【问题讨论】：

标签： google-chrome mobile viewport

【解决方案1】：

window.innerWidth 和 innerHeight 返回可视视口的尺寸。在桌面浏览器中，这通常是浏览器的窗口尺寸。在移动设备上，由于捏缩放，情况会稍微复杂一些。

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

tl;dr：innerWidth/innerHeight 反映应用了捏合缩放因子的视口，页面加载完全缩小。

编辑：这在 Chrome 中已经发生了变化。 window.innerWidth 现在返回 布局视口 宽度。要获得视觉视口宽度，请使用window.visualViewport.width。详情请见this article。

【讨论】：

很好的解释。谢谢你。我试图支持你的问题，但我至少需要 15 个代表 :(
我在使用设备工具栏时遇到问题，我认为window.innerHeight 是错误的。原来这是因为我使用<meta name="viewport" content="width=device-width, initial-scale=1"> 将initial-scale=1 更改为minimum-scale=1 解决了这个问题。希望这对某人有所帮助。

【解决方案2】：

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

window.screen.width

和

window.screen.height

这在我尝试测试屏幕是否为手机大小时特别有用。

【讨论】：

废话，兼容 IE 4：developer.mozilla.org/en-US/docs/Web/API/Window/screen

【解决方案3】：

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

    const widths = [window.innerWidth];

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

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

有条件检查是因为我不确定屏幕宽度 API 的普及程度。您可能需要调整它以不使用某些较新的 JS 功能，具体取决于您的目标设备/构建过程。

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

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

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

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

【讨论】：