网站不能在移动设备上垂直滚动答案

【问题标题】：Site not vertically scrolling on mobile device网站不能在移动设备上垂直滚动
【发布时间】：2018-12-04 06:07:35
【问题描述】：

我是 html/css 的新手，正在尝试部署一个非常基本的构建页面，但我不知道如何让它在移动设备上滚动。如果我在桌面上的 iphone Safari 浏览器开发人员工具中对其进行测试，此页面将滚动，但不会在我的实际 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>

【问题讨论】：

也许没有足够的内容来保证滚动。尝试将<body> 的高度设置为 2000px 或类似的值，或者将您的<section> 复制几次以确保内容不适合一个屏幕。
感谢您的建议。不幸的是，所有内容都没有显示，但它仍然不会滚动。

标签： html css scroll responsive-design mobile-safari

【解决方案1】：

我最终将高度设置为更大，为 2000 像素，然后将低于 780 像素的高度修改为 1000 像素。接下来，我将背景图像更改为在正文中而不是在 html 中。这种组合对我有用。

【讨论】：