[英]Wrong value for window.innerWidth during onload event in Firefox for Android?
[英]Firefox 78.0.1 Responsive Design Mode not returning correct value for window.innerWidth after screen rotation
這是 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,然后按“旋轉視口”按鈕。
看來這是一個可重現的 firefox 錯誤https://bugzilla.mozilla.org/show_bug.cgi?id=1650024
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.