设备旋转纵向/横向视口答案

【问题标题】：Device rotation Portrait/Landscape viewport设备旋转纵向/横向视口
【发布时间】：2021-12-27 02:55:30
【问题描述】：

iPhone 8 plus 的视口宽度有问题。下面的代码是 ipad Air 3 (2019) 的工作宽度。如果我在横向旋转 iPhone 8 plus 或 iPhone XS Max 而不是在纵向旋转，浏览器 safari 和 firefox 在纵向屏幕中增加了额外的空间。但不在横向屏幕中。但它变得更加特别：如果没有打开额外的水龙头，它只显示这种行为，而不是在每个案例中。你知道它为什么会这样吗？

<!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>

bevor rotating after rotating

【问题讨论】：

标签： html css ios viewport

【解决方案1】：

我还没有找到解决办法。但是如果其他人有这个麻烦，我在这里分享我丑陋的解决方法：

      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; 
         
        **setTimeout(function() {
            winGroesse = window.innerHeight;
            neueWinGroesse = winGroesse.toString() + "px";
            document.querySelector('html').style.height = neueWinGroesse;
        }, 300);**
     

      };

我发现，rezise 需要一点时间，所以我将第二个函数宽度设置为 300 毫秒的延迟。它做了它应该做的事情，但我认为有一个干净的方法

仍然希望有一个真正的解决方案

【讨论】：