iPhone /移动设备上的引导响应网格问题答案

【问题标题】：Bootstrap Responsive Grid Issue on iPhone / Mobile deviceiPhone /移动设备上的引导响应网格问题
【发布时间】：2017-11-05 18:37:22
【问题描述】：

我正在完成一个可以在这里找到的网站 - www.minimindsacademy.com

我需要找到一种方法让高度在 iPhone 设备上占据 100% 的屏幕。它在我的 iPhone 上并没有占据 100% 的高度，但在我的桌面浏览器上，即使我缩小它也是如此。这个网站的目标是使用 Twitter Bootstrap 作为我的样式框架，使其能够 100% 响应。我不确定它是否在其他移动设备上执行此操作。此外，我无法在我的浏览器屏幕上复制它（当我将浏览器屏幕缩小时它看起来不错，但是在我的 iPhone 上高度不是 100%）。我不知道我是否对 CSS 做错了或者什么。

它还不允许我在我的帖子上发布图片，但如果您在移动设备上查看该网站，您应该会在主页上看到我所指内容的示例。

HTML：

<!DOCTYPE html>
<html lang="en">
    <!-- HEAD -->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Home</title>
        <link rel="shortcut icon" href="images/favicon.ico">
        <link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <script src="script.js"></script>
</head>

<section class="hero">
    <!--Nav Bar-->
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-
toggle="collapse" data-target="#navbar" aria-expanded="false" aria-
controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
        <a class="navbar-brand" href="#">
          <img src="assets/logo.png" alt="">
        </a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="home.html">Welcome</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="staff.html">Staff</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

<div class="container">
    <div class="row">
      <div class="span4"></div>
      <div class="span4">           
        <a href="home.html" >
          <img id="logo" src="assets/logo.png" alt="logo">
        </a></div>
      <div class="span4"></div>
    </div>
</div>


<!--BOX START-->
<div class="container" id="box">
    <!--HEADER-->
    <!--<h1>Home</h1>-->
    <!-- CARASOUL -->
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="assets/home/1.jpg" alt="Chania">
          <div class="carousel-caption">
            <h3>Jammin Out</h3>
            <p>Piano at the mall!</p>
          </div>
        </div>

        <div class="item">
          <img src="assets/home/2.jpg" alt="Chicago">
          <div class="carousel-caption">
            <h3>Snack Time</h3>
            <p>Healthy eating for everyone!</p>
          </div>
        </div>

        <div class="item">
          <img src="assets/home/3.jpg" alt="Chicago">
          <div class="carousel-caption">
            <h3>Comfortable Environment</h3>
            <p>Hangin with my pal!</p>
          </div>
        </div>

        <div class="item">
          <img src="assets/home/4.jpg" alt="Chicago">
          <div class="carousel-caption">
            <h3>Arts and Crafts</h3>
            <p>Chalk is always fun!</p>
          </div>
        </div>

        <div class="item">
          <img src="assets/home/5.jpg" alt="Chicago">
          <div class="carousel-caption">
            <h3>Backyard Activities</h3>
            <p>Beep Beep!</p>
          </div>
        </div>

        <div class="item">
          <img src="assets/home/6.jpg" alt="Chicago">
          <div class="carousel-caption">
            <h3>Outdoor Fun</h3>
            <p>Hangin at the park!</p>
          </div>
        </div>
      </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-
slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">
</span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel"  role="button" data-
slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">
</span>
    <span class="sr-only">Next</span>
  </a>
</div>

    <!-- MAIN -->
            <div class="row">
                <div class="col-md-4" id="one">
                    <h3>About us</h3>
                    <p>Mini Minds Academy is here to provide a nurturing, 
safe and stimulating environment for children to explore, learn and play! We 
respect and value the diversity in each child's character, background and 
level of development.</p>
                    <a class="btn btn-primary pull-right" 
href="about.html">Read more</a>
                </div>
                <div class="col-md-4" id="two">
                    <h3>Meet our staff</h3>
                    <p>Our staff at Mini Minds academy consist of teachers 
Shelly Lenzotti, an alumni of Boise State University. She has over 13 years 
of experience in educating and caing for children ages 3 months - 11 years 
of age.</p>
                    <a class="btn btn-primary pull-right" 
href="staff.html">Meet us</a>
                </div>
                <div class="col-md-4" id="three">
                    <h3>Contact us</h3>
                    <p>If you are interested in our program and have a child 
between te ages of 1-6 years old feel free to contact us. We would be happy 
to provide for your child's needs if we have space available!</p>
                    <a class="btn btn-primary pull-right" 
href="contact.html">Contact us</a>
                </div>
            </div>

    </div>
</section>

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script 
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>

</html>

CSS：

        .navbar-brand {
            padding: 5px 15px;
        }

        .navbar-brand img {
            height: 40px;
        }

        #headerTitle {
            position: relative;
            max-width: 75%;
            margin: 0 auto;
        }


        .carousel-control.left, .carousel-control.right {
            background-image: none
        }

        #myCarousel {
            margin-bottom: 20px;
        }

        section.hero {
            background-image: url("../assets/1.jpg");
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            width: 100%;

        }


        #logo {
            max-width: 400px;
            margin: auto auto;
            text-align: center;
            margin-bottom: 30px;
            width:100%;
        }

        .row .span4 {
            text-align: center;
        }

        #box {
            max-width: 75%;
            padding: 20px;
            padding-bottom: 100px;
        }

        .row {
            padding: 0px 20px 0 20px;
        }

        .col-md-8 {
            font-weight: bold;
            color: #717070;
            padding-bottom:20px;
        }

        .col-md-4 {
            font-weight: bold;
            color: white;
            padding-bottom:20px;
        }

        #about h5 {
            font-weight: bold;
        }

        #about2 {
            background-color: #945389;
            font-weight: bold;
            height: 100%;
        }

        #one {
            background-color: #ee4524;
        }

        #two {
            background-color: #a2c95c;
        }

        #three {
            background-color: #945389;
        }

        .btn-primary {
          color: white;
          background-color: #018ca9;
          border-color: #018ca9;
          width: 100%;
          margin: 0 auto;
        }

        .btn-primary:hover,
        .btn-primary:focus,
        .btn-primary:active,
        .btn-primary.active {
          color: white;
          background-color: #01778f;
          border-color: #01778f;
        }

        h1 {
            color:#945389;
            font-weight:bold;
        }

        @media only screen and 
          (max-width: 767px) {
              #box{max-width:100%;}
        }

我想通了，这是因为我正在使用 go-daddy 的域转发。屏蔽是将代码转换成这样：

 <html>

<head>
  <title>minimindsacademy.com</title>

</head>
<frameset rows="100%,*" border="0">
  <frame src="http://www.ayodlomedia.com/miniminds/home.html" 
frameborder="0" />
  <frame frameborder="0" noresize />
</frameset>

<!-- pageok -->
<!-- 11 -->
<!-- -->
</html>

显然框架集标签与 HTML5 不兼容，因此，我假设这就是错误的来源。

【问题讨论】：

发布有问题的代码。此外，实际发生的事情的图片以及您想要的图片或描述会很有帮助。
抱歉，我的意思是我需要找到一种方法，让高度在 iPhone 设备上占据 100% 的屏幕。它在我的 iPhone 上并没有占据 100% 的高度，但在我的桌面浏览器上，即使我缩小它也是如此。我认为我还不能发布图片。

标签： android css iphone twitter-bootstrap mobile

【解决方案1】：

您的英雄部分似乎没有足够的高度来填满屏幕。如果将 min-height: 100vh 添加到 .hero 类中，使背景充满屏幕。

你指的是这个吗？

【讨论】：

Simon，这很奇怪，这已经在我的 CSS section.hero { height: 100vh;屏幕高度适用于除我的 iPhone 之外的所有设备。
不在您链接到的实时站点上...也许您只是在 iPhone 上获得缓存的 css？
有趣的是，在我的浏览器中适用于 Chrome 并修复了我的 iPhone (Safari) 上的问题，但现在在我的桌面浏览器上的 Firefox 中，它在我的屏幕高度后被切断。
这听起来像高度：100vh。确保使用 min-height 并进行硬刷新 Ctrl + F5 (Windows) / ⌘ + Shift + R (Mac) 以清除缓存。
这与 Godaddy 将我的原始 html 转换为框架集有关。我编辑了原始帖子。感谢您的帮助。