I am experiencing an issue with the viewport on an iPhone 8 Plus. The code below functions properly on an iPad Air 3 (2019). However, when I rotate the iPhone 8 Plus or an iPhone XS Max in landscape mode and then back to portrait mode, Safari and Firefox browsers add additional space on the portrait screen but not on the landscape screen. What's more intriguing is that this behavior only occurs if no additional tab is opened and not in every case. Any insights into why it behaves this way?
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titel</title>
<style>
* {
padding: 0;
margin:0;
}
</style>
</head>
<body style="height:100%; background-color:grey;display:grid;grid-template-rows:120px 60px calc(100% - 180px)">
<div style="background-color:green;height:100%;"></div>
<div style="background-color:red;height:100%;"></div>
<div style="background-color:blue;height:100%;"></div>
</body>
<script>
let winGroesse = window.innerHeight;
let winGroesseout;
window.onresize = reSizeFunkt;
let neueWinGroesse = winGroesse.toString() + "px";
document.querySelector('html').style.height = neueWinGroesse;
function reSizeFunkt () {
winGroesse = window.innerHeight;
neueWinGroesse = winGroesse.toString() + "px";
document.querySelector('html').style.height = neueWinGroesse;
}
</script>
</html>