在IOS (iPhone)上，高度无法正常工作

Question

我在Codepen上创建了这个网站。在尝试让其适应各种平台时，我遇到了问题。只有在IOS上，一个单独的div覆盖了整个页面，并且并非所有高度都能正常工作（意思是什么都放不下）。

我已经花了几天时间，仍然毫无头绪，为什么所有高度和规则在IOS上都不适用。

我尝试移除video-section，这样就可以显示大部分页面，但是eind部分仍然为空白。

我尝试添加max-height，这确实会显示一些其他内容，但似乎页面不能在IOS上变得更高，所以我的可用空间仍然有限。此外，这似乎不是一个合适的解决方案。

我尝试改变position，但无济于事。

似乎在IOS上高度无法正常工作。

谁能帮我弄清楚这是为什么？

var $animation_elements = $('.animation-element');
var $window = $(window);

function check_if_in_view() {
  var window_height = $window.height();
  var window_top_position = $window.scrollTop();
  var window_bottom_position = (window_top_position + window_height);

  $.each($animation_elements, function() {
    var $element = $(this);
    var element_height = $element.outerHeight();
    var element_top_position = $element.offset().top;
    var element_bottom_position = (element_top_position + element_height);

    //check to see if this current container is within viewport
    if ((element_bottom_position >= window_top_position) &&
      (element_top_position <= window_bottom_position)) {
      $element.addClass('in-view');
    } else {
      $element.removeClass('in-view');
    }
  });
}

$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');

var controller = new ScrollMagic();

 var ctrl = new ScrollMagic.Controller({
     globalSceneOptions: {
         triggerHook: 'onLeave'
     }
 });

//Enter section-1
new ScrollMagic.Scene({
  triggerElement: "#coming-soon",
  duration: "100%"
})
  .setTween(TweenMax.to("#image-1", 1, { top: "0%" }))
  .addTo(ctrl);

new ScrollMagic.Scene({
  triggerElement: "#coming-soon",
  duration: "100%"
})
  .setTween(TweenMax.to(".sign-up-banner", 1, { top: "0%" }))
  .addTo(ctrl);

new ScrollMagic.Scene({
  triggerElement: "#coming-soon",
  duration: "100%"
})
  .setTween(TweenMax.to("#text-1", 1, { top: "0%" }))
  .addTo(ctrl);

//Leave section-1

new ScrollMagic.Scene({
  triggerElement: "#introductie-1",
  duration: "100%"
})
  .setTween(TweenMax.to("#image-1", 1, { top: "40%", opacity:-1 }))
  .addTo(ctrl);

new ScrollMagic.Scene({
  triggerElement: "#introductie-1",
  duration: "100%"
})
  .setTween(TweenMax.to("#text-1", 1, { top: "-50%", opacity:0 }))
  .addTo(ctrl);

//leave seaction-2

new ScrollMagic.Scene({
  triggerElement: "#introductie-2",
  duration: "100%"
})
  .setTween(TweenMax.to("#image-2", 1, { top: "-40%", opacity:0 }))
  .addTo(ctrl);

new ScrollMagic.Scene({
  triggerElement: "#introductie-2",
  duration: "100%"
})
  .setTween(TweenMax.to("#text-2", 1, { top: "-50%", opacity:0 }))
  .addTo(ctrl);

new ScrollMagic.Scene({
  triggerElement: "#introductie-2",
  duration: "100%"
})
  .setTween(TweenMax.to("#release", 1, {opacity:1 }))
  .addTo(ctrl);

@import url("https://fonts.googleapis.com/css?family=Raleway:200");
* {
  font-family: "Raleway", sans-serif;
  font-size: 14px;
  font-weight: 100 !important;
}

input {
  -webkit-appearance: none;
}

html,
body,
section {
  padding: 0px;
  margin: 0px;
  height: 100%;
  width: 100%;
  color: #666;
}

p,
h1,
h2,
h3,
h4 {
  margin: 0px;
}

ul {
  list-style-type: none;
}

ul li {
  display: inline-block;
  margin: 50px 25px;
}

ul li .fa {
  font-size: 5em;
  transition: all 1s ease;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}

a {
  color: #666;
}

.desktop-only {
  display: initial;
}

.align-center {
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

.mobile-only {
  display: none;
}

.icon {
  background-color: antiquewhite;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  margin: 20px auto;
}

.fa-icon {
  font-size: 5em !important;
  padding: 40px;
}

.nederland-icon {
  width: 40%;
  padding: 40px;
}

#mc_embed_signup form {
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* (x, y)  => position */
  -ms-transform: translate(-50%, -50%);
  /* IE 9 */
  -webkit-transform: translate(-50%, -50%);
  /* Chrome, Safari, Opera */
  padding-left: 0px !important;
}

.sign-up-banner {
  z-index: 2;
  position: relative;
  top: -50%;
  color: white;
  height: 50%;
  background-color: #f3c17e;
}

.sign-up-banner input::placeholder {
  color: white;
}

.sign-up-banner #mc_embed_signup .mc-field-group input {
  border-bottom: 2px solid #ffffff !important;
}

.sign-up-banner #mc_embed_signup {
  background: #fff0;
}

.sign-up-banner #mc_embed_signup .mc-field-group input {
  background-color: #ffffff00;
  color: white;
}

.sign-up-banner #mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {
  background-color: rgba(255, 255, 255, 0);
}

.video-section {
  z-index: 3;
  overflow: hidden;
  position: relative;
  top: 0px;
  background-color: black;
  max-height: 100%;
  max-height: 100vh;
}

.video-section video {
  width: 100%;
}

#coming-soon {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0px;
  color: white !important;
  z-index: 3;
  max-height: 100%;
  max-height: 100vh;
}

.coming-soon h1 {
  font-size: 52px;
}

.introductie {
  position: relative;
  z-index: 1;
}

#introductie-1 {
  height: 100%;
}

#introductie-1 #image-1 {
  overflow: hidden;
  width: 25%;
  margin: 90px auto;
  max-height: 70%;
}

#introductie-1 .text-container {
  width: 500px;
  margin: 180px auto;
  color: #666;
}

#introductie-1 .text-container h1 {
  font-size: 2em;
  margin-bottom: 40px;
}

#introductie-1 .text-container p {
  font-size: 1.4em;
}

#introductie-2 {
  height: 100%;
}

#introductie-2 h1 {
  font-size: 2em;
  margin-bottom: 40px;
}

#introductie-2 p {
  font-size: 1.4em;
}

#introductie-2 .text-container {
  width: 60%;
  text-align: center;
  margin: 0 auto;
}

#introductie-2 #text-2 {
  position: relative;
}

#introductie-2 #image-2 {
  overflow: hidden;
  width: 60%;
  margin: 90px auto;
  position: relative;
}

#introductie-2 #image-2 img {
  width: 100%;
}

.left,
.right {
  width: 50%;
}

.left {
  float: left;
}

.right {
  float: right;
}

#image-1 {
  position: absolute;
  top: -70%;
  left: 10%;
}

#text-1 {
  top: 40%;
  right: 10%;
  position: absolute;
}

.center-container {
  display: table-cell;
  vertical-align: middle;
}

.center {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.center-text {
  text-align: center;
  overflow: hidden;
}

#eind {
  position: relative;
}

#release {
  opacity: 0;
}

#disclaimer {
  position: relative;
  left: 48%;
  bottom: 10px;
}

.fa-facebook:hover {
  color: #3b5998;
}

.fa-instagram:hover {
  color: #fbad50;
}

#eind ul {
  padding: 0px;
}

#eind p {
  margin-bottom: 100px;
}

.button {
  background-color: #faebd7 !important;
  color: #666 !important;
}

#mc_embed_signup {
  width: 40%;
  margin: 0 auto;
}

#mc_embed_signup .mc-field-group input {
  border: 0px !important;
  border-radius: 0px !important;
  border-bottom: 2px solid #666666 !important;
}

#mc_embed_signup #mc-embedded-subscribe-form input.mce_inline_error {
  border: 0px !important;
  border-radius: 0px !important;
  border-bottom: 2px solid #e85c41 !important;
}

#mc_embed_signup_scroll {
  text-align: center;
}

textarea:focus,
input:focus {
  outline: none;
}

#mc_embed_signup h2 {
  margin-bottom: 10% !important;
}

.clear {
  width: 150px;
  margin: 0 auto;
  margin-top: 5%;
}

.clear #mc-embedded-subscribe {
  border-radius: 0px !important;
  width: 150px !important;
  margin: 0 auto !important;
  height: 50px !important;
}

/*animation element*/

.animation-element {
  position: relative;
}

/*bounce up animation for the subject*/

.bounce-up {
  opacity: 0;
  -moz-transition: all 700ms ease-out;
  -webkit-transition: all 700ms ease-out;
  -o-transition: all 700ms ease-out;
  transition: all 700ms ease-out;
  -moz-transform: translate3d(0px, 200px, 0px);
  -webkit-transform: translate3d(0px, 200px, 0px);
  -o-transform: translate(0px, 200px);
  -ms-transform: translate(0px, 200px);
  transform: translate3d(0px, 200, 0px);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.bounce-up.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

@media (max-width: 1440px) {
  #disclaimer {
    position: relative;
    left: 48%;
    bottom: 10px;
  }
}

@media (max-width: 1024px) {
  #image-1 img {
    position: relative;
    left: -244px;
  }
}

@media (max-width: 768px) {
  .video {
    margin-top: 30%;
  }
  #introductie-1 .text-container {
    width: 280px;
  }
  #image-1-container #image-1 {
    width: 35%;
  }
  #mc_embed_signup {
    width: 60%;
  }
}

@media (max-width: 430px) {
  .sign-up-banner {
    position: sticky;
    top: 0px !important;
    max-height: 325px;
  }
  .desktop-only {
    display: none;
  }
  #disclaimer {
    left: 42%;
  }
  .mobile-only {
    display: inherit;
  }
  .coming-soon h1 {
    font-size: 45px;
  }
  .sign-up-banner {
    height: 60%;
  }
  #introductie-1 {
    height: 250%;
  }
  #introductie-2 {
    max-height: 500px;
    height: 200%;
  }
  #release {
    opacity: 1;
  }
  .left,
  .right {
    width: 100%;
  }
  #introduction-1-container {
    height: 100%;
  }
  #introductie-1 #image-1 {
    display: none;
  }
  #introductie-2 #image-2 {
    display: none;
  }
  #introductie-2 .text-container {
    width: 80%;
    text-align: center;
    margin: 0 auto;
  }
  #introductie-1 .text-container {
    position: initial;
    width: 80%;
    margin: 0 auto;
    text-align: center;
    margin-top: 40px;
  }
  #coming-soon h1 {
    font-size: 24px;
  }
  #introductie-1 .text-container p {
    font-size: 1.2em;
  }
  #introductie-2 p {
    font-size: 1.2em;
  }
  .video {
    margin-top: 60%;
  }
  .social-media ul {
    padding: 0px;
  }
  #mc_embed_signup {
    width: 100%;
    margin: 0 auto;
  }
  #text-1 {
    opacity: 1 !important;
  }
  #text-2 {
    position: initial !important;
    opacity: 1 !important;
  }
  #eind {
    height: 120%;
    max-height: 1000px;
  }
  .eind-block {
    position: relative;
  }
  .fa-balance-scale {
    padding: 40px 34px;
  }
}

@media (max-width: 320px) {
  #coming-soon h1 {
    font-size: 24px;
  }
  #introductie-1 .text-container p {
    font-size: 1.2em;
  }
  #introductie-2 p {
    font-size: 1.2em;
  }
  .video {
    margin-top: 60%;
  }
  .social-media ul {
    padding: 0px;
  }
  #mc_embed_signup {
    width: 100%;
    margin: 0 auto;
  }
}

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0" />
  
  <title>Volks</title>
  <link rel="stylesheet" href="styles/index.processed.css">
  <script src="https://use.fontawesome.com/39f17a3ca2.js"></script>

</head>
<body>
  <section class="video-section">
   <div class="video">
    <video loop autoplay id="video-background" muted playsinline>
      <source src="http://rapio.nl/videos/teaser.mp4" type="video/mp4">
    </video>
   </div>
  </section> 

  <section id="coming-soon">
      <div class="align-center center-text coming-soon">
        <h1 class="">Binnenkort verkrijgbaar.</h1>
      </div>
  </section>
  <section class="sign-up-banner">


        <!-- Begin MailChimp Signup Form -->
        <link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
        <style type="text/css">
          #mc_embed_signup {
            background: #fff;
            clear: left;
            font: 14px Helvetica, Arial, sans-serif;
          }
          /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
              We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
        </style>
        <div id="mc_embed_signup">
          <form action="https://volksphone.us17.list-manage.com/subscribe/post?u=e0b25e148103e039f3ed554d1&amp;id=bbad48d887" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
            <div id="mc_embed_signup_scroll">
              <h2>Ontvang een notificatie bij de bekendmaking van onze crowdfundings-campagne.</h2>
              <div class="mc-field-group">
                <input type="email" placeholder="Emailadres" name="EMAIL" class="required email" id="mce-EMAIL">
              </div>
              <div class="response" id="mce-error-response" style="display:none"></div>
              <div class="response" id="mce-success-response" style="display:none"></div>
            </div>
            <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_e0b25e148103e039f3ed554d1_bbad48d887" tabindex="-1" value=""></div>
            <div class="clear"><input type="submit" value="verzend" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
        </form>
      </div>
      <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
      <script type='text/javascript'>
        (function($) {
          window.fnames = new Array();
          window.ftypes = new Array();
          fnames[0] = "EMAIL";
          ftypes[0] = "email";
          fnames[1] = "FNAME";
          ftypes[1] = "text";
          fnames[2] = "LNAME";
          ftypes[2] = "text";
          fnames[3] = "BIRTHDAY";
          ftypes[3] = "birthday";
        })(jQuery);
        var $mcj = jQuery.noConflict(true);
      </script>
      <!--End mc_embed_signup-->
    

  </section>
  <section class="introductie" id="introductie-1">
    <div class="container" id="introduction-1-container">
      <div class="left" id="image-1-container">
        <div class="image-container " id="image-1">
          <img src="media/image-1.jpg">
        </div>
      </div>
      <div class="right">
        <div class="text-container" id="text-1">
          <div class="icon  mobile-only"><img class="nederland-icon" src="media/nederland_icoon.png"></div>
          <h1>Van Nederlandse Bodem</h1>
          <p>Volks is een Amsterdamse startup achter de eerste Nederlandse high-end smartphone. Maak kennis met onze technologie, je zult verrast zijn.</p><br><br>
          <div class="icon  mobile-only"><i class="fa fa-balance-scale mobile-only fa-icon" aria-hidden="true"></i></div>
                <h1>Balans tussen prijs en kwaliteit</h1>
          <p class="mobile-only">Wanneer had je voor het laatst een smartphone in je handen? Precies, nu.</p><p>Wanneer had je voor het laatst een smartphone in je handen? Precies, nu.</p><p>Er is een overvloed aan smartphones. Helaas betaal je nog steeds de hoogste prijs, of iets minder maar ontbreekt goede ondersteuning en kwaliteit. Volks wilt een balans bieden tussen een eerlijke prijs, goede customer support en topkwaliteit.  
</p><br><br>
      <div class="icon mobile-only"><i class="fa fa-users fa-icon" aria-hidden="true"></i></div>
      <h1 class=" mobile-only">En nu voor iedereen</h1>
      <p class=" mobile-only">Het is bijna zover. Binnenkort start de crowdfunding-campagne en hier hebben we jouw hulp hard bij nodig. Tijdens deze campagne kom je in de gelegenheid een pre-order te plaatsen. Slechts een gelimiteerd aantal Volks toestellen zijn beschikbaar tijdens de voorverkoop. 
</p>
        </div>
      </div>
    </div>
  </section>
  <section class="introdcutie desktop-only" id="introductie-2">
    <div class="text-container" id="text-2">
      <div class="icon mobile-only"><i class="fa fa-users fa-icon" aria-hidden="true"></i></div>
      <h1>En nu voor iedereen</h1>
      <p>Het is bijna zover. Binnenkort start de crowdfunding-campagne en hier hebben we jouw hulp hard bij nodig. Tijdens deze campagne kom je in de gelegenheid een pre-order te plaatsen. Slechts een gelimiteerd aantal Volks toestellen zijn beschikbaar tijdens de voorverkoop. 
</p>
    </div>
    <div class="image-container " id="image-2">
      <img src="media/image-2.png">
    </div>

    
  </section>
  <section id="eind">
      <div class="align-center center-text coming-soon eind-block">
        <p>Meer info over de datum en technische specificaties volgt binnenkort op onze Facebookpagina.</p>
        <h1 class="">Volks<i class="fa fa-copyright" aria-hidden="true" style="font-size:15px;"></i> <br> December 2017</h1>
        <div class="social-media">
          <ul>
            <li>
              <a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a>
            </li>
            <li>
              <a href=""><i class="fa fa-instagram" aria-hidden="true"></i></a>
            </li>
          </ul>
        </div>
    </div>
  </section>
  <a id="disclaimer" href="disclaimer.html">disclaimer</a>
  <!-- ==== scripts ==== -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/TweenMax.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/debug.addIndicators.min.js'></script>
  <!-- ==== CUSTOM JS ==== -->
  <script src="scripts/index.js"></script>
</body>
</html>

- Salman

---

你是如何在 iPhone 上进行测试的？你有检查过 Chrome 模拟器吗？如果你不知道发生了什么，那为什么认为高度是问题呢？ - Huangism

@Huangism 我在 iPhone 上的 Chrome 和 Safari 上运行了它。我认为这可能是一个高度问题，因为黑屏的高度与某个部分相同。 - Salman

Answer 1

这并不是IOS的问题，而是响应性的问题。您已经为每个部分设置了固定高度，因此在移动设备上它们会相互重叠。

只需将所有section的高度设置为height: 100vh。

并且

@media (max-width: 430px){
    .introductie {
    height: 300vh;
    overflow: hidden;
}
}

它应该能正常工作。

- Zahidul Islam Ruhel

---

你有检查过在iOS设备上将部分高度更改为100vh时会发生什么吗？所有其他部分都会消失。尝试将前两个部分设置为50vh，看看会发生什么。 - Berdesdan

现在我个人测试了一下，使用给定的更新代码，对我来说是有效的。请尝试一下，如果对你不起作用，请告诉我。 - Zahidul Islam Ruhel

这在iOS Safari上不起作用，因为它不支持100vh。 - psvj

Answer 2

我已经找到了答案。

这是一个JS脚本，自动查找窗口的高度，并将该高度设置为给定类的高度。

但这不是全部解决方案。现在高度更好了，而且不像之前应用于html、body和section的height:100%那样杂乱无章。

我使用媒体查询，在每个手机尺寸上设置max-height，以便它可以扩展到预期的部分之外。

https://90c726a539a841eb97f1b7b3f2aaf646.codepen.website

JS的解决方案是：

// On document ready set the div height to window
$(document).ready(function(){ 

    // Assign a variable for the application being used
    var nVer = navigator.appVersion;
    // Assign a variable for the device being used
    var nAgt = navigator.userAgent;
    var nameOffset,verOffset,ix;


    // First check to see if the platform is an iPhone or iPod
    if(navigator.platform == 'iPhone' || navigator.platform == 'iPod'){
        // In Safari, the true version is after "Safari" 
        if ((verOffset=nAgt.indexOf('Safari'))!=-1) {
          // Set a variable to use later
          var mobileSafari = 'Safari';
        }
    }

  //===== FULL HEIGHT =====\\

    // If is mobile Safari set window height +60
    if (mobileSafari == 'Safari') { 
        // Height + 60px
        $('.full-height').css('height',(($(window).height()) + 60)+'px');
    } else {
        // Else use the default window height
        $('.full-height').css({'height':(($(window).height()))+'px'});  
    };


});

// On window resize run through the sizing again
$(window).resize(function(){
    // If is mobile Safari set window height +60
    if (mobileSafari == 'Safari') { 
        // Height + 60px
        $('.full-height').css('height',(($(window).height()) + 60)+'px');
    } else {
        // Else use the default window height
        $('.full-height').css({'height':(($(window).height()))+'px'});  
    };

 /* //===== HALF HEIGHT =====\\

    // If is mobile Safari set window height +60
    if (mobileSafari == 'Safari') { 
        // Height + 60px
        $('.half-height').css('min-height',(($(window).height() /2) + 60)+'px'/2);
    } else {
        // Else use the default window height
        $('.half-height').css({'min-height':(($(window).height()/2)  )+'px'});  
    };

// On window resize run through the sizing again
$(window).resize(function(){
    // If is mobile Safari set window height +60
    if (mobileSafari == 'Safari') { 
        // Height + 60px
        $('.half-height').css('min-height',(($(window).height()/ 2)  + 60)+'px');
    } else {
        // Else use the default window height
        $('.half-height').css({'min-height':(($(window).height()/ 2) )+'px'});  
    };
});

  //===== DOUBLE HEIGHT =====\\

    // If is mobile Safari set window height +60
    if (mobileSafari == 'Safari') { 
        // Height + 60px
        $('.half-height').css('min-height',(($(window).height()* 2)  + 60)+'px');
    } else {
        // Else use the default window height
        $('.half-height').css({'min-height':(($(window).height()* 2)  )+'px'}); 
    };


});

// On window resize run through the sizing again
$(window).resize(function(){
    // If is mobile Safari set window height +60
    if (mobileSafari == 'Safari') { 
        // Height + 60px
        $('.half-height').css('min-height',(($(window).height()* 2)  + 60)+'px');
    } else {
        // Else use the default window height
        $('.half-height').css({'min-height':(($(window).height()* 2) )+'px'});  
    };*/
});

而CSS（使用SCSS）的解决方案是：

//IPHONE&SAMSUNG PLUS
@media (max-height: 736px) {
  .full-height{
    max-height:736px;
  }
  .introductie-mobile {
  height: 1200px !important;
  max-height: 1200px;
  }
}
//IPHONE 6/7/8
@media (max-height: 667px) {
  .full-height{
    max-height:667px;
  }
  .introductie-mobile {
    height: 1200px !important;
    max-height: 1200px;
  }

}
//IPHONE %
@media (max-height: 568px) {
  .full-height{
    max-height:568px;
  }
  .introductie-mobile {
    height: 1200px !important;
    max-height: 1200px;
  }
}

- Salman

Answer 3

顶部黑色 <div class="video-section"> 的高度在任何设备上都是全屏高度，包括 iPhone。因此，仅仅高度本身并不是问题。

然而，在其他设备上，下一个 <div class="sign-up-banner"> 的位置会动态改变，随着向下滚动而带有视差效果。一旦您完全经过顶部黑色 <div class="video-section">，整个第二个 <div class="sign-up-banner"> 就会完全可见。这是通过 javascript 代码实现的。由于某种原因，该 javascript 在 iPhone 上无法运行。

应用于 <div id="coming-soon"> 内的 <form> 的一些 CSS 仍然被应用，这使得该 div 被困在第一个 div 后面。

您可以使用以下 CSS 来反转这种情况：

.sign-up-banner{
    position: static;
    height: auto;
}

#mc_embed_signup form{
    position: static !important;
    -ms-transform: none; /* IE 9 */
    -webkit-transform: none; /* Chrome, Safari, Opera */
    transform: none; 
}

您可以将其包装在媒体查询中，以便仅适用于特定屏幕。要使其适用于iPhone，请按如下方式操作。

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
    //insert your css here
}

这将应用CSS到iPhone 4和4s上。不能保证不会应用于其他设备，但是css无法针对特定设备进行定位，因此这是我们所拥有的最好方法。您可以查看针对其他设备（包括其他iPhone型号）的媒体查询，网址为：https://css-tricks.com/snippets/css/media-queries-for-standard-devices/。

- James Jones

---

感谢James的回复，css-tricks链接真的很有帮助。我尝试了你的建议，但不幸的是它没有起作用。我相当自信IOS在高度方面存在问题，因为一个部分覆盖了整个页面（在Iphone 7上测试过）。在不同的Iphone上可能会有所不同。 - Salman

@Notorious_Creed 很高兴我至少能够提供一些帮助。我在使用此iPhone模拟器查看你的CodePen时，将CSS设置在浏览器中，它解决了问题。我不能确定它是否适用于其他iPhone。在放弃之前，请确保添加CSS实际上覆盖了先前的CSS。也许您可以对所有内容应用!important以进行测试。我不确定您所说的“高度问题，因为一个部分覆盖整个页面”的含义，因为黑色手机视频在任何设备上都覆盖整个屏幕。 - James Jones