Android iPhone/移动设备上的引导响应网格问题_Android_Css_Iphone_Twitter Bootstrap_Mobile

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

android css iphone twitter-bootstrap mobile

Android iPhone/移动设备上的引导响应网格问题,android,css,iphone,twitter-bootstrap,mobile,Android,Css,Iphone,Twitter Bootstrap,Mobile,我正在完成一个网站，可以在这里找到- 我需要找到一种方法，让高度在iPhone设备上占据100%的屏幕。在我的iPhone上，它并没有占据100%的高度，但在我的桌面浏览器上，即使我缩小它，它也会占据100%的高度。该网站的目标是使用Twitter引导作为我的风格框架，使其100%响应。我不确定它是否在其他移动设备上这样做。而且，我不能在我的浏览器屏幕上复制这个（当我把浏览器屏幕尽量缩小时，它看起来很好，但是在我的iPhone上高度不是100%）。我不知道我是否对CSS做了什么错误它还不允许我

我正在完成一个网站，可以在这里找到-

我需要找到一种方法，让高度在iPhone设备上占据100%的屏幕。在我的iPhone上，它并没有占据100%的高度，但在我的桌面浏览器上，即使我缩小它，它也会占据100%的高度。该网站的目标是使用Twitter引导作为我的风格框架，使其100%响应。我不确定它是否在其他移动设备上这样做。而且，我不能在我的浏览器屏幕上复制这个（当我把浏览器屏幕尽量缩小时，它看起来很好，但是在我的iPhone上高度不是100%）。我不知道我是否对CSS做了什么错误

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

HTML:

我明白了，这是因为我在使用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>


minimindsacademy.com

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

看起来您的英雄部分没有足够的高度来填充屏幕。如果您将最小高度：100vh添加到.hero类中，使背景填充屏幕

这就是您所指的吗？

发布您的代码和问题。另外，一张实际发生的事情的图片和一张你想要的图片或描述会很有帮助。对不起，我的意思是我需要找到一种方法，让高度在iPhone设备上占据100%的屏幕。在我的iPhone上，它并没有占据100%的高度，但在我的桌面浏览器上，即使我缩小它，它也会占据100%的高度。我认为我还不允许发布图片。西蒙，这很奇怪，这已经在我的CSS部分了。英雄{高度：100vh；}屏幕高度对我的iPhone以外的所有东西都起作用。你链接到的现场网站上没有。。。也许你刚刚在iPhone上得到了缓存css？有趣的是，它在我的浏览器中对Chrome起到了作用，并在我的iPhone（Safari）上解决了这个问题，但现在在我的桌面浏览器上的Firefox中，它在我的屏幕高度之后被切断了。这听起来像是高度：100vh。确保使用“最小高度”，并按Ctrl+F5（Windows）进行硬刷新/⌘ + Shift+R（Mac）清除缓存。这与godaddy将原始html转换为框架集有关。我编辑了原文。谢谢你的帮助。

        .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%;}
        }

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