Сайт не прокручивается вертикально на мобильном устройстве - PullRequest
Новая
       27

Сайт не прокручивается вертикально на мобильном устройстве

0 голосов
/ 30 ноября 2018

Я новичок в html / css и пытаюсь развернуть очень простую конструкторскую страницу, но не могу понять, как заставить ее прокручиваться на мобильном телефоне.Эта страница будет прокручиваться, если я протестирую ее в инструменте разработчика браузера Safari для iphone на моем рабочем столе, но не будет прокручиваться на моем настоящем устройстве iphone.Может кто-нибудь помочь мне разобраться, как изменить, чтобы он прокручивался на устройстве? 

@import url("font-awesome.min.css");
    @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,600,600italic");


    html, body, div, span, applet, object,
    iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
    pre, a, abbr, acronym, address, big, cite,
    code, del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var, b,
    u, i, center, dl, dt, dd, ol, ul, li, fieldset,
    form, label, legend, table, caption, tbody,
    tfoot, thead, tr, th, td, article, aside,
    canvas, details, embed, figure, figcaption,
    footer, header, hgroup, menu, nav, output, ruby,
    section, summary, time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }

    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
        display: block;
    }

    body {
        line-height: 1;
    }

    ol, ul {
        list-style: none;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    body {
        -webkit-text-size-adjust: none;
    }

    mark {
        background-color: transparent;
        color: inherit;
    }

    input::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

    input, select, textarea {
        -moz-appearance: none;
        -webkit-appearance: none;
        -ms-appearance: none;
        appearance: none;
    }


    /* MAIN */


    html {
        background: url(./assets/gray-wood-background.png);
        box-sizing: border-box;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        height: 1080px;
        width: 100%;
        overflow: scroll;

        }




        body.preload *, body.preload *:before, body.preload *:after {
                -moz-animation: none !important;
                -webkit-animation: none !important;
                -ms-animation: none !important;
                animation: none !important;
                -moz-transition: none !important;
                -webkit-transition: none !important;
                -ms-transition: none !important;
                transition: none !important;
            }

            body, input, select, textarea {
                color: #ffffff;
                font-family: 'Source Sans Pro', sans-serif;
                font-size: 16pt;
                font-weight: 300;
                line-height: 1.65em;
            }

    section {
        border: 1px solid white;
        margin: 5% auto 5% auto;
        text-align: center;
        width: 70%;
    }

    hr {
        width: 80%;
    }

    h1 {
        padding: 40px;
        font-size: 2em;
    }

    .logo {
        height: 100px;
        width: 333px;
    }

    .copyright {
        text-align: center;
        margin-top: 60px;
        font-size: .65em;
    }


    @media all and (max-width: 480px) {

        html {
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        }

    .logo {
            height: 76px;
            width: 225px;
        }

    }
<html lang="en">
        <head>
        <!-- meta -->
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

            <!-- links -->

            <link rel="stylesheet" href="construction-style.css">
            <!--[if lt IE 9]>
                <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
            <![endif]-->

        <title>Developed by Gjoraas</title>

        </head>

        <body>


            <!-- <div style="background-image: url(assets/gray-wood-background.png); width:100%; height:100%;"></div> -->
        <!-- MAIN -->

            <section>

                <a href="construction.html"><img class="logo" src="assets/DGlogoTwhite.png" alt="Developed by Gjoraas logo"></a>
                <h1>COMING SOON</h1>
                <hr>

                <p>Our website is currently under construction.</p> 
                <p>Please check back soon to learn more about our web and app development services.</p>

                <!-- Copyright -->
                            <div class="copyright">
                                <ul class="menu">
                                    <li>&copy; Developed by Gjoraas 2018</li>
                                </ul>
                            </div>
            </section>






        </body>
    </html>

1 Ответ

0 голосов
/ 04 декабря 2018

В итоге я установил высоту больше 2000px, а затем изменил высоту, когда значение меньше 780px до 1000px.Затем я изменил фоновое изображение, чтобы оно было в теле вместо HTML.Эта комбинация сработала для меня.

...