时间戳

首页 > 解决方案 > 设备旋转纵向/横向视口

html - 设备旋转纵向/横向视口

问题描述

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>

先转 后转

标签： htmlcssiosviewport

解决方案

i've still not found a solution. But should someone else have that trouble i share here my ugly workaround:

      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);**
     

      };

I figured out, that the rezise needs an moment so I set a 2nd function width a delay of 300ms. It does what it's supposed to do but I think there is a clean way

still hoping there is a real solution

推荐阅读