移动视图上的内容被截断（iphone x、ipad、ipad pro）答案

【问题标题】：Content gets cut off on mobile view (iphone x, ipad, ipad pro)移动视图上的内容被截断（iphone x、ipad、ipad pro）
【发布时间】：2023-04-01 15:44:01
【问题描述】：

我觉得我已经尝试了一切。该网站在我的笔记本电脑上看起来很好，在 chrome web 开发人员工具中，当检查 iphone 6/7/8 plus、iphone x、ipad 和 ipad pro（所以任何高于 667 像素的高度）时，我的内容都被截断了，页脚消失了一半最后一页的内容在 ipad 上消失了。

我知道这是高度，如果我将 height 属性更改为 5000px 之类的傻事，那么我的内容当然就在那里，但我在其他移动设备上有大量空白，所以很明显这不是解决方案。

Here's what it looks like on a device like iphone 6 - perfectly normal

here is what I get on ihone X - the footer is goooone :(

这里是codepen：https://codepen.io/DiteIkporo/pen/vYOmMdK

这是我的css代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
    --primary: #ddd;
    --dark: #002a3a;
    --light: #fff;
    --shadow: 0 3px 5px #000000;
    --logo-color: #00b0b9;
    --header-color: #3b89b9;
    --btn2: #293857;
    --grey: #6f7a90;
    --shadow2: 0 0 8px #000000; 
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.container {
width: 80%;
margin: 0 auto;
}
body{
font-family: arial, helvetica, sans-serif;
line-height: 1.6;
}
header {
padding: .5rem 2rem;
align-items: center;
width: 100%;
margin: 0;
background: var(--btn2);
box-shadow: var(--shadow);
position: sticky;
top: 0;
z-index: 1;
}

header #navbar{
  display: flex;
  justify-content: space-between;
}


#header-img{
width:8rem;
margin-left: -1rem;
}

#navbar ul{
display: flex;
}
#navbar ul li {
padding: 10px;

}
#navbar a{
color: var(--light);
text-transform: uppercase;
}

#navbar a:hover{
color: #eee;
font-weight: bold;
}
.product{
margin: 0;
background: url('../img/product.jpg') center center/cover;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: var(--light);
padding: 0 20px;

}
.product input{
padding: 0.3rem;
display: block;
margin: 0.9rem auto;
}
.product input#email{
width: 300px;
border-radius: 5px;
}
.product h1{
  text-transform: uppercase;
  font-size: 5rem;
  line-height: 1.2;
}
.btn1 {
font-size: 1.2rem;
border-radius: 10px;
border: 1px #fff solid;
background: transparent;
color: var(--light);
}
.btn1:hover{
  cursor: pointer;
}
.features {
  background: url('../img/blue-close-up.jpg') center center/cover;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--light);
  padding: 2rem;
}
.box {
  background: var(--btn2);
  opacity: 0.9;
  text-align: center;
  padding: 2rem;
  box-shadow: var(--shadow);
  margin: 1rem;
}
.box p{
padding: 0.3rem;
margin-bottom: 0.5rem;
}
.btn2 {
  font-size: 1rem;
  color: var(--light);
  background-color: transparent;
  border: solid #fff 1px;
  border-radius: 5px;
  padding: 0.5rem;
}
.pricing{
  background: url('../img/blue-sky.jpg') center center/cover;
  height: 100vh;
  display: flex;

  justify-content: center;
  align-items: center;
  color: var(--light);
  padding: 2rem;
}
.level{
  background: var(--header-color);
  opacity: 0.9;
  text-align: center;
  padding: 2rem;
  box-shadow: var(--shadow);
  margin: 1rem;
  }

.level p{
padding: 0.3rem;
margin-bottom: 0.5rem;
}
.btn3 {
  font-size: 1rem;
  color: var(--light);
  background-color: transparent;
  padding: 0.5rem;
  border-radius: 5px;
  border: #fff solid 1px;
  cursor: pointer;
}
.video {
  background:url('../img/blue-close-up.jpg');
 background-size: cover;
 min-height: 100vh;
 align-items: center;
 display: flex;
 align-items: center;
}
.block > iframe{
  max-width: 560px;
  width:100%;
  box-shadow: var(--shadow);
}
.block{
  /* background: var(--btn2); */
  text-align: center;
  /* box-shadow: var(--shadow); */
  margin: auto;
 width: 50%;
 padding: 40px;
 color: var(--light);
}
.block h2{
  padding-bottom: 1.3rem;
}
.footer{
  text-align: end;
  padding: .5rem .5rem;
  background: var(--btn2);
  box-shadow: var(--shadow2);
  position: relative;
}
.footer ul{
  display: flex;
  justify-content: flex-end;

}
.footer ul li{
  margin-left: 1rem;
}
.footer ul li a{

  color: var(--light);
}
.footer a:hover{
  color: #eee;
font-weight: bold;
}
.footer span{
  color: var(--light);
}
.price{
  font-size: 2.5rem;
}

这是我的 mobile.css

#navbar{
        flex-direction: column;
        align-items: center;
    }
    .product h1{
        font-size: 3rem;
    }
    .features{
        flex-direction: column;
        padding:0;
    
    }
    .features h2{
        font-size: 1rem;
    }
    .features p{
        font-size: 0.8rem;
        margin-bottom:0.2rem;
    }
    .box{
        padding: 0.6rem;
        margin: 1rem 2rem;
    }
.btn2{
    padding: 0.3rem;
}
    .pricing{
        flex-direction: column;
        padding: 0;
    }
    .level{
        padding:0.5rem;
        margin: 1rem 2rem;
    }
    .level p{
        padding:0.1rem;
        margin-bottom:0.2rem;
        font-size: 0.8rem;
    }
    .price {
        font-size: 1rem;
    } 
    .btn3{
        padding:0.3rem;
    }
    .block {
        padding: 10px;
        width:80%;
      }

这是我的html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DI Tech</title>
    <script src="https://kit.fontawesome.com/fa769308d4.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" media="screen and (max-width: 768px)" href="css/mobile.css">
    <link rel="stylesheet" media="screen and (min-width: 1100px)" href="css/widescreen.css">
</head>
<body>
   <header id="header">
        <nav id="navbar" class="main-nav">
            <div class="logo">
        <img id="header-img" src="img/fitbit-logo.png" alt="Fitbit logo">
        </div>
        
            <ul>
                <li><a class="nav-link" href="#Product">Product</a></li>
                <li><a class="nav-link" href="#Features">Features</a></li>
                <li><a class="nav-link" href="#Pricing">Pricing</a></li>
            </ul>
        </nav>   
    </header>
   
        <section id="Product" class="product">
        <h1>The future of tech is here</h1> 
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique quibusdam, perspiciatis animi repellendus eum officiis amet obcaecati debitis, quidem facere quasi repellat ab laboriosam eius nesciunt non autem natus porro! Enim tempora quod sit laudantium!</p>
        <form action="https://www.freecodecamp.com/email-submit" method="POST" id="form">
            <input id="email" name="email" type="email" required placeholder="Enter Your Email...">
            <input id="submit" type="submit" value="Subscribe" class="btn1"/>
            </form>
        </section>
 
        <section id="Features" class="features">
            <div class="box">
            <i class="fas fa-cogs fa-2x"></i>
            <h2>Lorem, Ipsum.</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto perferendis ad necessitatibus magni obcaecati aperiam temporibus, quis odio iure.</p>
            <a href="#" class="btn2">Read More</a>
            </div>
            <div class="box">
            <i class="fas fa-user-friends fa-2x"></i>
            <h2>Lorem, Ipsum Dolor.</h2>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit ab beatae suscipit ipsam nulla voluptatibus nisi aut nam tempore veniam?
            </p>
            <a href="#" class="btn2">Read More</a>
            </div>
            <div class="box">
            <i class="fas fa-chart-line fa-2x"></i>
            <h2>Lorem, Ipsum.</h2>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magnam amet quisquam tenetur? Exercitationem accusantium aliquid nesciunt.</p>
            <a href="#" class="btn2">Read More</a>
            </div>
        </section>
        <section id="Pricing" class="pricing">
         <div class="option">
             <div class="level">Standard
             <h2 class="price">£79</h2>
             <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam quas eaque laboriosam praesentium amet nihil, aliquam nulla quasi necessitatibus inventore.</p>
             <button class="btn3">Select</button>
             </div>
            </div>       
            <div class="option">
                <div class="level">Pro
                <h2 class="price">£109</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam quas eaque laboriosam praesentium amet nihil, aliquam nulla quasi necessitatibus inventore.</p>
                <button class="btn3">Select</button>
                </div>
            </div>
            <div class="option">
                <div class="level">Ultra
                <h2 class="price">£159</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam quas eaque laboriosam praesentium amet nihil, aliquam nulla quasi necessitatibus inventore.</p>
                <button class="btn3">Select</button>
                </div>
            </div>
        </section>
          <div class="video">
              <div class="block">
          <h2>Watch our most recent ad here</h2>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/KTZH4Upbv4w?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
              </div>  
        </div>

    <div class="footer">
    <footer>
        <ul>
            <li><a href="#">Privacy</a></li>
            <li><a href="#">Terms</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <Span>DI Tech, Copyright &copy; 2019</Span>
    </footer>
    </div>
 <!-- JQuery CDN -->
 <script
 src="https://code.jquery.com/jquery-3.4.1.min.js"
 integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
 crossorigin="anonymous"></script>
 <!-- Local JS File -->
   <script src="js/main.js"></script>
</body>
</html>

【问题讨论】：

能否也提供截图中页面的HTML？
编辑添加html

标签： css mobile height responsive

【解决方案1】：

据我所知，这似乎是开发工具中的一个错误。我在自己的开发中也遇到过这个问题，我认为这是我的错。但是今天再次遇到它后，我决定再研究一下。我去过 3 个有信誉的网站，即。 Stackoverflow、Gmail 和 freeCodeCamp，在开发工具中选择 iPhone X 看看他们是否也有这个问题。

你瞧，他们都这样做了。您几乎无法辨认出各个页面末尾的内容，如果您快速上下滚动，您甚至可以看到那里还有更多应该可见但实际上没有的内容。

是的，我不认为这是个人发展缺陷。

【讨论】：