Could this be a bug specific to Firefox, or have I made an error somewhere?
When testing in Chrome or on an actual device like Android, everything works fine. It appears to be an issue only when using Firefox's Responsive Design Mode.
Below is the complete code needed to reproduce the problem:
<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>
To replicate the issue, enter Responsive Design Mode (Ctrl+Shift+M), load the HTML, and then click the "Rotate Viewport" button.