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

新手上路,请多包涵

我在 codepen 上创建了 这个 网站。在尝试让它响应所有平台时,我遇到了一个问题。似乎单个 div 覆盖了整个页面(仅在 IOS 上)并且并非所有高度都正常工作(意味着不适合)。

我已经研究了好几天了,但仍然不知道为什么所有的高度和规则都不适用于 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 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 465
2 个回答

我找到了答案。

这是一个 JS 脚本,可以自动找到窗口的 height 并将该高度设置为给定的类。

但是,这不是全部解决方案。高度更好了,并且不像以前那样到处都是,当我将 height:100%; 应用于 html、正文和部分时。

我根据手机尺寸在 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 发布,翻译遵循 CC BY-SA 3.0 许可协议

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

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

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

它应该有效。

原文由 Zahidul Islam Ruhel 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题