9
Tôi đã tạo trang web this trên codepen. Trong khi cố gắng làm cho nó đáp ứng cho tất cả các nền tảng tôi gặp phải một vấn đề. Nó xuất hiện một div duy nhất bao gồm toàn bộ trang (chỉ trên IOS) và không phải tất cả các đỉnh cao đang hoạt động đúng (có nghĩa là không có gì phù hợp).Chiều cao không hoạt động đúng trên IOS (iphone)
Tôi đã ở đó trong nhiều ngày và vẫn không có đầu mối, tại sao tất cả các chiều cao và quy tắc không áp dụng trên IOS.
Tôi đã thử xóa video-section cho thấy hầu hết các trang ngoại trừ phần eind chỉ là một màu trắng trống.
Tôi đã thử thêm max-height để hiển thị một số nội dung khác, nhưng dường như trang không thể cao hơn trên IOS vì vậy tôi vẫn bị giới hạn về không gian để làm việc. Ngoài ra nó không có vẻ là một giải pháp thích hợp.
Tôi đã thử thay đổi position nhưng không có kết quả.
Nó chỉ có vẻ như nếu chiều cao không đúng cách làm việc trên IOS
bất cứ ai có thể giúp tôi tìm ra lý do tại sao điều này xảy ra?
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();
\t var ctrl = new ScrollMagic.Controller({
\t globalSceneOptions: {
\t triggerHook: 'onLeave'
\t }
\t });
//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.
\t 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&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>
Làm thế nào bạn thử nghiệm trên iphone? bạn đã kiểm tra chrome sim chưa? Nếu bạn không biết điều gì đang xảy ra thì tại sao bạn nghĩ chiều cao là vấn đề? – Huangism
@Huangism Tôi chạy nó trên chrome và safari trên Iphone. Và tôi cho rằng đó là vấn đề về chiều cao. Nguyên nhân của màn hình đen là chiều cao của một phần – Salman