-1
У меня есть некоторые проблемы с html и css. Я хочу, чтобы 100% DIV находились друг под другом, но все, что я делаю, не работает. Он работает почти, но не на каждом мобильном устройстве. Он работает на моем рабочем столе, но когда я открываю его на своем телефоне, он не работает. Может кто-нибудь, пожалуйста, помогите мне?HTML, CSS - высота 100% на каждом устройстве не работает
window.onload = onLoad;
function onLoad()
{
\t var teller = 0;
\t //ONLOAD
\t $('span').fadeIn(4000);
\t $('html,body').animate({
\t \t \t scrollTop: $('html').offset().top
\t }, 1700);
\t
\t //MENU \t
\t $('#menu').on('click', function (e)
\t {
\t \t $("#menuBar").animate({width:'toggle'},350);
\t \t $("#menu").toggleClass('rotated');
\t });
\t //BUTTON_ONClICK
\t //BUTTON_1
\t $('#screen-1-go').on('click', function (e)
\t {
\t \t e.preventDefault();
\t \t $('html,body').animate({
\t \t \t scrollTop: $('#screen-2').offset().top
\t \t }, 1700);
});
\t
\t //TO_SCREEN_3
\t $('.more').on('click', function (e)
\t {
\t \t teller=0;
\t \t e.preventDefault();
\t \t $('html,body').animate({
\t \t \t scrollTop: $('#screen-3').offset().top
\t \t }, 1700);
});
\t //TO_THE_TOP
\t $('.top').on('click', function (e)
\t {
\t \t teller=0;
\t \t e.preventDefault();
\t \t $('html,body').animate({
\t \t \t scrollTop: $('html').offset().top
\t \t }, 1700);
});
\t
\t
\t //VARS_SCROLL_EVENT
\t var screens = ["html", "#screen-2", "#screen-3"];
\t $('html').on('wheel', function(event)
\t {
\t \t if (event.originalEvent.deltaY > 0)
\t \t {
\t \t \t teller++;
\t \t \t animateToDiv(screens[teller]);
\t \t }
\t \t else
\t \t {
\t \t \t teller--;
\t \t \t animateToDiv(screens[teller]);
\t \t }
\t });
}
function animateToDiv(div)
{
\t $('html,body').animate({
\t \t scrollTop: $(div).offset().top
\t }, 1700);
}html
{
height: 100%;
margin: 0;
padding: 0;
}
body
{
\t margin: 0;
\t background: #000;
\t overflow-x: hidden;
\t overflow-y: hidden;
}
/* Menu */
#menu
{
\t position: fixed;
\t right: 10px;
\t z-index: 9999;
\t cursor: pointery
}
#menu > img
{
\t width: 60px;
\t height: 60px;
}
#menuBar
{
\t position: fixed;
\t right: 0px;
\t float: right;
\t height: 100%;
\t width: 100%;
\t background-color: black;
\t box-shadow: -1px 0px 1px 1px black;
\t display: none;
\t z-index: 9998;
\t -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
\t filter: alpha(opacity=70);
\t -moz-opacity: 0.7;
\t -khtml-opacity: 0.7;
\t opacity: 0.7;
}
.rotated
{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
/* Screen_1 */
#screen-1
{
\t position: fixed;
\t font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
\t background: url(../Uploads/Video/screen1-video.gif) repeat;
\t background-size: cover;
\t color: white;
\t font-size: 1.2rem;
\t width: 100%;
\t height: 100%;
}
#screen-1-tekst
{
\t margin-left: auto;
margin-right: auto;
\t margin-top: 16em;
\t width: 30em;
}
#screen-1-tekst > span
{
\t font-family: 'Brush Script MT', cursive;
\t text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
\t color: #DBBC90;
\t font-size: 6em;
\t display: none;
}
#screen-1-go
{
\t margin-top: 16%;
}
.button
{
\t display: block;
font-size: 14px;
letter-spacing: 1px;
text-align: center;
border: 1px solid rgba(255,255,255,0.75);
color: rgba(255,255,255,0.75);
height: 45px;
line-height: 48px;
cursor: pointer;
-webkit-transition: color 0.5s ease,border-color 0.5s ease;
transition: color 0.5s ease,border-color 0.5s ease;
\t margin-left: auto;
margin-right: auto;
width: 13em;
\t margin: auto;
\t position: absolute;
\t left: 0; bottom: 10%; right: 0;
}
/* Screen2 */
#screen-2
{
\t position: absolute;
\t margin-top: 100%;
\t width: 100%;
\t height: 100%;
\t background-color: #d55a49;
}
#screen-2-tekst > h1
{
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 6em;
line-height: 1em;
\t color: rgba(99, 35, 35, 0.8);
text-shadow: 1px 4px 6px #D55A49, 0 0 0 #000, 2px 4px 6px #D55A49;
\t font-size: 5em;
\t text-align: center;
}
#screen-2-tekst
{
\t margin-left: auto;
margin-right: auto;
\t margin-top: 4em;
\t width: 27em;
}
::-moz-selection { background: #5af; color: #fff; text-shadow: none; }
::selection { background: #5af; color: #fff; text-shadow: none; }
/* Screen2 */
#screen-3
{
\t position: absolute;
\t margin-top: 150.5%;
\t width: 100%;
\t height: 100%;
\t background-color: #80a5ba;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
\t <head>
\t \t <meta charset="utf-8">
\t \t <link rel="stylesheet" href="Files/CSS/home.css">
\t \t <script src="Files/JS/background.js"></script>
\t \t <script src="Files/JS/JQBA.js"></script>
\t \t <script src="Files/JS/jquery-1.12.0.min.js"></script>
\t </head>
\t <body>
\t \t <div id="menu">
\t \t \t <img src="Files/Uploads/Image/hamburger.png">
\t \t </div>
\t \t <div id="menuBar">
\t \t </div>
\t \t
\t \t <div id="screen-1">
\t \t \t <div id="screen-1-tekst">
\t \t \t \t <span>Joost de Niet</span>
\t \t \t </div>
\t \t \t <div id="screen-1-go">
\t \t \t \t <h1 class="button">More about me</h1>
\t \t \t </div>
\t \t </div>
\t \t
\t \t <div id="screen-2">
\t \t \t <div id="screen-2-tekst">
\t \t \t \t <h1>Portfolio</h1>
\t \t \t </div>
\t \t \t <div id="screen-button">
\t \t \t \t <h1 class="button more">More..</h1>
\t \t \t </div>
\t \t </div>
\t \t
\t \t <div id="screen-3">
\t \t \t <div id="screen-button">
\t \t \t \t <h1 class="button top">To the top</h1>
\t \t \t </div>
\t \t </div>
\t </body>
</html>
Пожалуйста, вы можете сказать на каком устройстве вы столкнулись. если вы прикрепляете снимок экрана, который поможет или даст ссылку для проверки. – Chilll007