将 HTML 元视口标签与 Bootstrap 一起使用

Question

我目前正在 Bootstrap 建立一个网站 4. 我正在使用 Google Lighthouse 来分析网站，它建议我将 <meta name="viewport" content="width=device-width, initial-scale=1"> 添加到我的代码的 head 标签中在手机上正确显示。

此标签使文本在移动设备上显得更大，从而改进了我的网站；以前，它看起来像桌面视图，因此文本和图片更难阅读。不幸的是，它也弄乱了 Bootstrap 格式。文本在导航栏和元素之外重叠，外观完全混乱。

在使用该标签之前，我的网站在移动设备上看起来像这样：

使用该标签后，我的网站在移动设备上看起来像这样：

请注意文本如何更易于阅读，但重叠在其容器之外。我不应该在使用 Bootstrap 的同时使用这个标签吗？我想保持增加的大小和提高文本的可读性，但也不想弄乱 UI.

这是我的 HTML 页面代码：

<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="styling.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Services</title>
    <meta name="Description" content="Salon's Offered Services.">
    <link rel="manifest" href="manifest.webmanifest">
</head>
<body>
    <div id="navbar"></div>
    <div class="container-fluid py-4 px-5">
        <div class="row">
            <div class="col">
                <h1 class="text-center">Your escape awaits.</h1>
                <h5>
                    Our services are customized for you to enhance your personal style and overall wellbeing. Take a moment for yourself . . . embrace your natural beauty, find a sense of balance, and, most importantly, have fun. You're always welcome at Salon.
                </h5>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-4">
                <div class="list-group" id="list-tab" role="tablist">
                    <a class="list-group-item list-group-item-action active" id="list-hair-list" data-toggle="list" href="#list-hair" role="tab" aria-controls="list-hair">Hair Services</a>
                    <a class="list-group-item list-group-item-action" id="list-facials-list" data-toggle="list" href="#list-facials" role="tab" aria-controls="list-facials">Facials</a>
                    <a class="list-group-item list-group-item-action" id="list-massages-list" data-toggle="list" href="#list-massages" role="tab" aria-controls="list-massages">Massages</a>
                    <a class="list-group-item list-group-item-action" id="list-body-list" data-toggle="list" href="#list-body" role="tab" aria-controls="list-body">Body Treatments</a>
                    <a class="list-group-item list-group-item-action" id="list-waxing-list" data-toggle="list" href="#list-waxing" role="tab" aria-controls="list-waxing">Waxing</a>
                    <a class="list-group-item list-group-item-action" id="list-sideorsolo-list" data-toggle="list" href="#list-sideorsolo" role="tab" aria-controls="list-sideorsolo">On the Side or Solo</a>
                    <a class="list-group-item list-group-item-action" id="list-nails-list" data-toggle="list" href="#list-nails" role="tab" aria-controls="list-nails">Nails</a>
                    <a class="list-group-item list-group-item-action" id="list-makeup-list" data-toggle="list" href="#list-makeup" role="tab" aria-controls="list-makeup">Makeup</a>
                </div>
            </div>
            <div class="col-8">
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="list-hair" role="tabpanel" aria-labelledby="list-hair-list">
                        <p>Consultation</p>
                        <p>Women's Haircut & Style</p>
                    </div>
                    <div class="tab-pane fade" id="list-facials" role="tabpanel" aria-labelledby="list-facials-list">...</div>
                    <div class="tab-pane fade" id="list-massages" role="tabpanel" aria-labelledby="list-massages-list">...</div>
                    <div class="tab-pane fade" id="list-body" role="tabpanel" aria-labelledby="list-body-list">...</div>
                    <div class="tab-pane fade" id="list-waxing" role="tabpanel" aria-labelledby="list-waxing-list">...</div>
                    <div class="tab-pane fade" id="list-sideorsolo" role="tabpanel" aria-labelledby="list-sideorsolo-list">...</div>
                    <div class="tab-pane fade" id="list-nails" role="tabpanel" aria-labelledby="list-nails-list">...</div>
                    <div class="tab-pane fade" id="list-makeup" role="tabpanel" aria-labelledby="list-makeup-list">...</div>
                </div>
            </div>
        </div>
    </div>
    <div id="footer"></div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="loadelements.js"></script>
</html>

这是我的 CSS:

:root {
    --primary-color: #03A9F4;
    --primary-color--light: #B3E5FC;
    --secondary-color: #009688;
    --secondary-color--dark: #00675b;
    --secondary-color--light: #52c7b8;
}
html {
    position: relative;
    min-height: 100%;
}
body {
    margin-bottom: 60px; /* Margin bottom by footer height */
}
nav {
    background-color: var(--primary-color);
}
.navbar-brand {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif !important;
}
footer {
    background-color: var(--primary-color--light);
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px; /* Set the fixed height of the footer here */
    line-height: 60px; /* Vertically center the text there */
}
#get-started-button {
    border-color: var(--secondary-color);
    background-color: var(--secondary-color);
}
#hairstyle-carousel {
    width: 400px;
    margin: 0 auto;
}
.list-group-item.list-group-item-action.active {
    border-color: var(--secondary-color--light);
    background-color: var(--secondary-color--light);
}
.image-description {
    color: var(--secondary-color--dark);
}

Answer 1

使用 bootstrap 以确保正确渲染和触摸缩放时，您应该将视口元标记添加到

<meta name="viewport" content="width=device-width, initial-scale=1">

您也可以禁用缩放：

    <meta name="viewport" content="width=device-width, initial-scale=1, 
          maximum-scale=1, user-scalable=no">

你没有以正确的方式使用 bootstrap 元素（例如：侧边栏 table）......请 post 你的 html 代码所以我可以帮助你...

现在有了代码，我就能知道你应该做什么了：

第 24 行替换

    <div class="col-4">

来自

    <div class="col">

Answer 2

如果您使用的元素已经只是 window 大小的一小部分（例如列），请确保您阅读了他们关于响应性的指南。例如，对于 col 类，您可以添加这样的断点 col-sm-4。根据您使用的断点（sm、md、lg、xl），列将调整大小以适应响应。

https://getbootstrap.com/docs/4.1/layout/grid/

这是一个 bootstrap 页面，可以满足您的所有需求！祝你好运！

换句话说，将其添加到您的专栏类，这应该可以解决大部分间距和“压缩”问题。（我个人认为 md 断点是最理想的，但同样，这是一个意见。您的网站就是您想要的！）

将 HTML 元视口标签与 Bootstrap 一起使用

Using HTML Meta Viewport Tag with Bootstrap

html

viewport

twitter-bootstrap