个人中心
gpt4 book ai didi

html - 滚动不会进入移动 View ，因为内容大小很小

转载 作者：太空宇宙 更新时间：2023-11-04 06:09:08 26 4
gpt4 key购买 nike

当我在 chrome 开发者工具中切换到移动 View 时，滚动没有出现，所有内容都在屏幕上可见，这使得阅读变得非常困难，因为它们对于高度调整来说变得非常小。所以内容正在调整，因此它变得越来越小。 当我在 chrome 开发者工具中切换到移动 View 时，滚动没有出现，所有内容都在屏幕上可见，这使得阅读变得非常困难，因为它们对于高度调整来说变得非常小。所以内容正在调整，因此它变得越来越小。

<!DOCTYPE html>
<html>

<head>
  <title>GetToWork</title>
  <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
  <style>
    .main-container {
        display: flex;
        flex-flow: column wrap;
        align-items: center;
        font-family:Lato, Arial, Sans serif;
        padding: 0 10%;
    }
    body {
        border: 1px solid gray;
    }

    footer {
        height: 240px;
        background-image: url(./Group\ 4265.svg);
    }
    .header-icon{
        width: 100px;
        margin-top: 60px;
        margin-bottom: 60px;
    }

    .margin-top-60 {
        margin-top: 60px;
    }
    .lato-bold {
        font-size: 24px;
        font-weight: bold;
        line-height: 1.21;
        letter-spacing: normal;
        text-align: center;
        color: #000000;
    }
    .lato-bolder {
        font-weight: bold;
    }
    .font-size-21 {
        font-size: 21px;
    }
    .font-size-18 {
        font-size: 18px;
    }
    .margin-top-20 {
        margin-top: 20px;
    }
    .margin-top-30 {
        margin-top: 30px;
    }
    .margin-bottom-30 {
        margin-bottom: 30px;
    }
    .width-100-percent {
        width: 100%;
    }
    .flex-justify-space-around{
        display: flex;
        justify-content: space-around;
    }
    .flex-justify-space-between{
        display: flex;
        justify-content: space-between;
    }
    .flex-justify-space-between{
        display: flex;
        justify-content: center;
    }
    .flex{
        display: flex;
    }
    .justify-flex-end {
        justify-content: flex-end;
    }
    .maroon-bg {
        color:#7a2693;
    }
    .width-80-percent {
        width: 80%;
    }
    .dashed-border{
        border: 1px dashed #8b4c9e;
        width: 320px;
        display: inline-block;
        vertical-align: super;
    }
    .padding-left-right-10-percent {
        padding-left: 10%;
        padding-right: 10%;
    }
    .width-150 {
        width: 150px;
    }
    .margin-bottom-20{
        margin-bottom: 20px;
    }
    .flex-column {
        display: flex;
        flex-flow: column;
    }
    .footerIcons {
        position: absolute;
        margin-top: 100px;
        width: 100%;
        display: flex;
        flex-flow: column nowrap;
    }
    .margin-left-20 {
        margin-left:20px;
    }
    .color-white{
        color: white;
    }
    /* @media (max-width: 767px) {
        .main-container {
            padding: 0;
        } 
       
    } */

  </style>
</head>

<body>
    <section class="main-container">
        <div class="header-icon"><img src="./Group 4254.svg" class="width-100"></div>
        <div class="lato-bold">Package Purchase Successful!</div>
        <div class="font-size-21 margin-top-60">Hi <span class="lato-bolder" th:text="${invoiceName}"></span></div>
        <div class="font-size-18 margin-top-20">You have successfully purchased the <span class="lato-bolder" th:text="${planName}">SUPERSAVER</span> package.</div>
        <div class="font-size-18"> Package details can be found below.</div>
        <div class="margin-top-20 font-size-18 lato-bolder">Simplify Office Commute with GetToWork.</div>
        <div class="font-size-18 lato-bolder">Enjoy Stress-free work days. </div>
        <hr class="margin-top-30 width-100-percent">
        <section id="packageDetails" class="width-80-percent margin-top-30 margin-bottom-30">
            <div class="flex-justify-space-around font-size-18">
                <div class="flex-column">
                    <span class="lato-bolder maroon-bg">Package Name</span>
                    <span th:text="${planName}" class="margin-top-30">SUPERSAVER</span>
                </div>
                <div class="flex-column">
                    <span class="lato-bolder maroon-bg">Rides/Validity</span>
                    <div class="margin-top-30">
                        <span th:text="${planBooking}">10 Rides/</span>
                        <span th:text="${planDays}">90 Days</span>
                    </div>
                </div>
                <div class="flex-column">
                    <span class="lato-bolder maroon-bg">Cost</span>
                    <div class="margin-top-30">&#x20b9;<span th:text="${invoicePrice}">200</span></div>
                </div>
            </div>
            <!-- <div class="flex-justify-space-around font-size-18 margin-top-30">
                    <span th:text="${planName}">SuperSaver</span>
                    <div>
                    <span th:text="${planBooking}">10 Rides/</span>
                    <span th:text="${planDays}">90 Days</span>
                    </div>
                    <div>&#x20b9; <span th:text="${invoicePrice}">200</div>
            </div> -->

        </section>
        <hr class="width-100-percent"> 
        <section>
            <div class="margin-top-30 margin-bottom-30">
                <img src="./Shape.svg">
                <span class="dashed-border"></span>
                <img src="./Group 2224.svg">
            </div>
            <div class="margin-bottom-20 flex-justify-space-between lato-bolder">
                <span>Home</span>
                <!-- <span class="visibilty-hide"></span> -->
                <span>Office</span>
            </div>
            <div class="margin-bottom-30 flex-justify-space-between">
                <span class="width-150">Infosys Pvt Ltd, Electronic City, Bangalore </span>
                <!-- <span class="visibilty-hide"></span> -->
                <span class="width-150 justify-flex-end flex">MoveInsync , 17th Cross, HSR Laypot, Bangalore</span>
            </div>
        </section>
    </section>
      
    <footer>
        <div class="footerIcons">
            <div class="flex-justify-space-between">
                <a class="color-white" target="_blank" href="https://www.linkedin.com/company/14637641/admin/">
                    <img src="./Group 3013.svg" />
                </a>
                <a class="color-white margin-left-20" target="_blank" href="https://twitter.com/GetToWork6">
                    <img src="./Group 3012.svg" />
                </a>
                <a class="color-white margin-left-20" target="_blank" href="https://www.instagram.com/Get_To_Work_MIS/">
                    <img src="./Group 3015.svg" />
                </a>
                <a class="color-white margin-left-20" target="_blank" href="https://www.facebook.com/Get-To-Work-1391007324386201/">
                    <img src="./Path 611.svg" />
                </a>
            </div>
            <div class="flex-justify-space-between margin-top-20">
                    <p style="font-size: 14px;" class="color-white">Copyright © MoveinSync Technology Solutions Pvt Ltd</p>
            </div>
            <div class="flex-justify-space-between" style="font-size: 14px;">
                <a class="color-white" target="_blank" href="http://gettowork.io">
                    gettowork.io
                </a>
                <a class="color-white margin-left-20"  href="">
                    Privacy Policy
                </a>
                <a class="color-white margin-left-20" href="">
                    Terms and Conditions
                </a>
                <a class="color-white margin-left-20" href="">
                    Help & FAQs
                </a>
            </div>
            
        </div>
    </footer>

</body>

</html>

最佳答案

该页面不适合移动屏幕，因为缺少 viewport 元数据。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

这是你的页面

<!DOCTYPE html>
<html>

<head>
  <title>GetToWork</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
  <style>
    .main-container {
        display: flex;
        flex-flow: column wrap;
        align-items: center;
        font-family:Lato, Arial, Sans serif;
        padding: 0 10%;
    }
    body {
        border: 1px solid gray;
    }

    footer {
        height: 240px;
        background-image: url(./Group\ 4265.svg);
    }
    .header-icon{
        width: 100px;
        margin-top: 60px;
        margin-bottom: 60px;
    }

    .margin-top-60 {
        margin-top: 60px;
    }
    .lato-bold {
        font-size: 24px;
        font-weight: bold;
        line-height: 1.21;
        letter-spacing: normal;
        text-align: center;
        color: #000000;
    }
    .lato-bolder {
        font-weight: bold;
    }
    .font-size-21 {
        font-size: 21px;
    }
    .font-size-18 {
        font-size: 18px;
    }
    .margin-top-20 {
        margin-top: 20px;
    }
    .margin-top-30 {
        margin-top: 30px;
    }
    .margin-bottom-30 {
        margin-bottom: 30px;
    }
    .width-100-percent {
        width: 100%;
    }
    .flex-justify-space-around{
        display: flex;
        justify-content: space-around;
    }
    .flex-justify-space-between{
        display: flex;
        justify-content: space-between;
    }
    .flex-justify-space-between{
        display: flex;
        justify-content: center;
    }
    .flex{
        display: flex;
    }
    .justify-flex-end {
        justify-content: flex-end;
    }
    .maroon-bg {
        color:#7a2693;
    }
    .width-80-percent {
        width: 80%;
    }
    .dashed-border{
        border: 1px dashed #8b4c9e;
        width: 320px;
        display: inline-block;
        vertical-align: super;
    }
    .padding-left-right-10-percent {
        padding-left: 10%;
        padding-right: 10%;
    }
    .width-150 {
        width: 150px;
    }
    .margin-bottom-20{
        margin-bottom: 20px;
    }
    .flex-column {
        display: flex;
        flex-flow: column;
    }
    .footerIcons {
        position: absolute;
        margin-top: 100px;
        width: 100%;
        display: flex;
        flex-flow: column nowrap;
    }
    .margin-left-20 {
        margin-left:20px;
    }
    .color-white{
        color: white;
    }
    /* @media (max-width: 767px) {
        .main-container {
            padding: 0;
        } 
       
    } */

  </style>
</head>

<body>
    <section class="main-container">
        <div class="header-icon"><img src="./Group 4254.svg" class="width-100"></div>
        <div class="lato-bold">Package Purchase Successful!</div>
        <div class="font-size-21 margin-top-60">Hi <span class="lato-bolder" th:text="${invoiceName}"></span></div>
        <div class="font-size-18 margin-top-20">You have successfully purchased the <span class="lato-bolder" th:text="${planName}">SUPERSAVER</span> package.</div>
        <div class="font-size-18"> Package details can be found below.</div>
        <div class="margin-top-20 font-size-18 lato-bolder">Simplify Office Commute with GetToWork.</div>
        <div class="font-size-18 lato-bolder">Enjoy Stress-free work days. </div>
        <hr class="margin-top-30 width-100-percent">
        <section id="packageDetails" class="width-80-percent margin-top-30 margin-bottom-30">
            <div class="flex-justify-space-around font-size-18">
                <div class="flex-column">
                    <span class="lato-bolder maroon-bg">Package Name</span>
                    <span th:text="${planName}" class="margin-top-30">SUPERSAVER</span>
                </div>
                <div class="flex-column">
                    <span class="lato-bolder maroon-bg">Rides/Validity</span>
                    <div class="margin-top-30">
                        <span th:text="${planBooking}">10 Rides/</span>
                        <span th:text="${planDays}">90 Days</span>
                    </div>
                </div>
                <div class="flex-column">
                    <span class="lato-bolder maroon-bg">Cost</span>
                    <div class="margin-top-30">&#x20b9;<span th:text="${invoicePrice}">200</span></div>
                </div>
            </div>
            <!-- <div class="flex-justify-space-around font-size-18 margin-top-30">
                    <span th:text="${planName}">SuperSaver</span>
                    <div>
                    <span th:text="${planBooking}">10 Rides/</span>
                    <span th:text="${planDays}">90 Days</span>
                    </div>
                    <div>&#x20b9; <span th:text="${invoicePrice}">200</div>
            </div> -->

        </section>
        <hr class="width-100-percent"> 
        <section>
            <div class="margin-top-30 margin-bottom-30">
                <img src="./Shape.svg">
                <span class="dashed-border"></span>
                <img src="./Group 2224.svg">
            </div>
            <div class="margin-bottom-20 flex-justify-space-between lato-bolder">
                <span>Home</span>
                <!-- <span class="visibilty-hide"></span> -->
                <span>Office</span>
            </div>
            <div class="margin-bottom-30 flex-justify-space-between">
                <span class="width-150">Infosys Pvt Ltd, Electronic City, Bangalore </span>
                <!-- <span class="visibilty-hide"></span> -->
                <span class="width-150 justify-flex-end flex">MoveInsync , 17th Cross, HSR Laypot, Bangalore</span>
            </div>
        </section>
    </section>
      
    <footer>
        <div class="footerIcons">
            <div class="flex-justify-space-between">
                <a class="color-white" target="_blank" href="https://www.linkedin.com/company/14637641/admin/">
                    <img src="./Group 3013.svg" />
                </a>
                <a class="color-white margin-left-20" target="_blank" href="https://twitter.com/GetToWork6">
                    <img src="./Group 3012.svg" />
                </a>
                <a class="color-white margin-left-20" target="_blank" href="https://www.instagram.com/Get_To_Work_MIS/">
                    <img src="./Group 3015.svg" />
                </a>
                <a class="color-white margin-left-20" target="_blank" href="https://www.facebook.com/Get-To-Work-1391007324386201/">
                    <img src="./Path 611.svg" />
                </a>
            </div>
            <div class="flex-justify-space-between margin-top-20">
                    <p style="font-size: 14px;" class="color-white">Copyright © MoveinSync Technology Solutions Pvt Ltd</p>
            </div>
            <div class="flex-justify-space-between" style="font-size: 14px;">
                <a class="color-white" target="_blank" href="http://gettowork.io">
                    gettowork.io
                </a>
                <a class="color-white margin-left-20"  href="">
                    Privacy Policy
                </a>
                <a class="color-white margin-left-20" href="">
                    Terms and Conditions
                </a>
                <a class="color-white margin-left-20" href="">
                    Help & FAQs
                </a>
            </div>
            
        </div>
    </footer>

</body>

</html>

关于html - 滚动不会进入移动 View ，因为内容大小很小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56575342/

26 4 0
文章推荐： javascript - 当我呈现除主页以外的不同路线时，html 未加载源，express-handlebars-Node.js
文章推荐： python - 在 Matplotlib 中使用透明度离散化颜色图
文章推荐： python - PyQt - 不希望无模式对话框总是在最前面
文章推荐： C编程问题无关变量在使用STRCPY后被覆盖
太空宇宙
个人简介

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

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