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

标签 html css flexbox

当我在 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/

上一篇：css - 如何将 google 字体的使用替换为本地托管字体？

下一篇：javascript - 当我呈现除主页以外的不同路线时，html 未加载源，express-handlebars-Node.js

相关文章：

javascript - Angularjs - 如何将 JSON 数据内的数组调用为 html

javascript - 一侧文字行情

css - 使 3 行文本在悬停时同时改变颜色 - 请帮忙

css - 带有 Bootstrap 类的 Flexbox 垂直和水平居中

html - 如何使用省略号和 Angular-FlexLayout 缩短文本？

php - WordPress 博客，只对当前页面使用存档？

html - 如何在没有表格元素的情况下让一个元素的高度自动跟随下一个元素的高度？

html - webkitNotifications - SECURITY_ERR : DOM Exception 18 - script, OK - 按钮

javascript - 将动态 jquery a href 添加到动态 jquery div

html - flex 元素的等高 child

©2024 IT工具网  联系我们