个人中心
gpt4 book ai didi

html - 网站不能在移动设备上垂直滚动

转载 作者：行者123 更新时间：2023-11-28 00:45:37 24 4
gpt4 key购买 nike

我是 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>

最佳答案

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

关于html - 网站不能在移动设备上垂直滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53547860/

24 4 0
文章推荐： javascript - 在responseError方法中访问响应头
文章推荐： javascript - 如何解析[object HTMLDivElement]？
文章推荐： javascript - 根据设备动态更改文本框大小
文章推荐： Html CSS 表单改变背景
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com