在安卓设备上使用Chrome时，我得到了innerWidth和 innerHeight的异常数值。

下面的最小代码可以暴露这个问题。

<canvas id="canvas"></canvas>

  window.onresize = function() {
      let ScreenWidth = window.innerWidth;
      let ScreenHeight = window.innerHeight;

      console.log("w: " + ScreenWidth);
      console.log("h: " + ScreenHeight);

      let canvas = document.getElementById('canvas');

      // Woa! This is the mischief.
      canvas.style.width = ScreenWidth + "px";
      canvas.style.height = ScreenHeight + "px";
  };

  // Dispatch the event.
  window.dispatchEvent(new Event('resize'));

于是，我有一个空的HTML页面，其中包含一个canvas元素。代码会读取innerWidth和 innerHeight，并把canvas的 CSS宽度和高度设置为它，以使画布填满整页。简单直接。在PC上运行正常。

现在进入问题。第一条强制resize事件只是为了让画布立即重新缩放。我的console.log() 中的值是 360, 649。

当我旋转手机时，事件会再次派发，数值为 705, 274。由于浏览器头部区域（地址栏）等原因有所不同，但数值还算合理。

再一次把它旋转回去！现在的数值是 705, 1271。我期望它们会回到 360, 649。

这是怎么回事？如果我移除改变canvas宽度和高度的那几行，所谓的“bug”就消失了，来回旋转手机时在 360, 649 与 705, 274 之间能够正确切换。

是不是因为在旋转时把canvas的宽度设为705？但innerWidth应该反映实际的视口，而不是内容宽度，还是我读错了文档？

https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth

编辑：

看起来这能修复不一致性：

从：

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

至：

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

我也不知道为什么，但添加 minimum-scale=1 会让宽度和高度在旋转屏幕时返回到相同的值，符合预期。如果有人知道原因，请给出解释！

解决方案

没看清楚这里的逻辑，但添加 minimum-scale=1 解决了我的具体问题，希望能帮助到其他人：

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