Firefox 78.0.1 响应式设计模式在屏幕旋转后没有为 window.innerWidth 返回正确的值答案

【问题标题】：Firefox 78.0.1 Responsive Design Mode not returning correct value for window.innerWidth after screen rotationFirefox 78.0.1 响应式设计模式在屏幕旋转后没有为 window.innerWidth 返回正确的值
【发布时间】：2020-07-01 16:05:11
【问题描述】：

这是 Firefox 的错误还是我搞砸了？

如果我在真实设备（例如 Android）上使用 chrome 甚至 firefox，没有问题，它似乎只影响 Firefox 的响应式设计模式。

这是复制问题所需的完整代码：

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" id="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
</head>
<body>

<script>
var pageInPortraintMode;

// Prevent keyboard from squeezing the entire UI
addEventListener("load", function() {
  pageInPortraintMode = window.innerHeight > window.innerWidth;
  document.getElementById("viewport").setAttribute("content", "width=" + window.innerWidth + ", height=" + window.innerHeight + ", initial-scale=1.0, maximum-scale=1.0, user-scalable=0");
})

// Listen to window resizes to detect orientation changes
window.addEventListener("resize", windowSizeChanged);

function windowSizeChanged() {
  alert(window.innerWidth + "x" + window.innerHeight);
  if (((pageInPortraintMode === true) && (window.innerHeight < window.innerWidth)) || ((pageInPortraintMode === false) && (window.innerHeight > window.innerWidth))) {
    pageInPortraintMode = window.innerHeight > window.innerWidth;
    document.getElementById("viewport").setAttribute("content", "width=" + window.innerWidth + ", height=" + window.innerHeight + ", initial-scale=1.0, maximum-scale=1.0, user-scalable=0");
  }
}
</script>

<div style="width:100%; height:100%; background-color:#000; position:fixed; left:0; top:0"></div>

</body>
</html>

要复制进入响应式设计模式 (Ctrl+Shift+M)，加载 html，然后按“旋转视口”按钮。

【问题讨论】：

我不确定，但我提交了a bug 供 Devtools 进行分类。随意添加我错过的任何其他细节！

标签： javascript firefox responsive-design

【解决方案1】：

看来这是一个可重现的 Firefox 错误 https://bugzilla.mozilla.org/show_bug.cgi?id=1650024

【讨论】：