网站元素在移动设备上太小
Elements of website are too small on mobile devices
我正在为我的 discord 机器人 - Idle Baker 创建一个网站。对于这个网站，我决定使用最新的 Bootstrap 5 来设计，因为它比一大堆 CSS.
更容易。
我已经对网站的 home-page 进行了编码，但在我可以进一步移动之前，我意识到一个问题，当我在 browser-devtools 中以移动形式加载网站时，我的元素的缩放比例，导航栏非常小。它在 PC 和更大屏幕的设备上看起来非常好。我还将提供以下代码。
这里还有 3 张图片：
普通 PC 分辨率
手机分辨率异常
外部网站上的正常移动分辨率
AOS.init();
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap');
.parallax {
background-image: url("./assets/bg_pic.png");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
backdrop-filter: blur(3px);
}
.floating {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.box-glow {
animation: glowing 3000ms infinite;
}
.fa_color {
color: #ffffff
}
.btn-primary-spacing {
margin-right: 15px;
margin-left: 15px;
margin-bottom: 5px !important;
}
.multicolortext {
background-image: linear-gradient(to right, rgb(238, 255, 0), rgb(255, 0, 64));
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
}
@keyframes floating {
0% {
transform: translate(0, 0px);
}
50% {
transform: translate(0, 15px);
}
100% {
transform: translate(0, -0px);
}
}
@keyframes glowing {
0% {
box-shadow: 0 0 -10px #c4a300;
}
40% {
box-shadow: 0 0 20px #c4a300;
}
60% {
box-shadow: 0 0 20px #c4a300;
}
100% {
box-shadow: 0 0 -10px #c4a300;
}
}
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet" />
<body style="font-family: 'Nunito', sans-serif; color:#FFFFFF" class="parallax">
<div data-aos="zoom-out" data-aos-duration="1750">
<div class="container-xxl container-fluid rounded" id="navbar-main">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand " href="http://127.0.0.1:5500/index.html">
<img src="./assets/logo.png" alt="Idle Baker " width="75 " height="75 " class="d-inline-block align-top ">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
<ul class="navbar-nav ms-auto text-center">
<li>
<a class="nav-link btn-lg btn-outline-warning p-3 mx-2 rounded-pill" href="index.html">Home</a>
</li>
<li>
<a class="nav-link btn-lg btn-outline-warning p-3 mx-2 rounded-pill" href="about.html">About</a>
</li>
<li>
<a class="nav-link btn-lg btn-outline-warning p-3 mx-2 rounded-pill" href="starter.html">Starter Guide</a>
</li>
<li>
<a class="nav-link btn-lg btn-outline-warning p-3 mx-2 rounded-pill" href="commands.html">Commands</a>
</li>
<li>
<a class="nav-link btn-lg btn-outline-warning p-3 mx-2 rounded-pill" href="donate.html">Donate</a>
</li>
<li>
<a class="nav-link btn-lg btn-outline-warning p-3 mx-2 rounded-pill" href="index.html#vote-for-us">Vote</a>
</li>
<li>
<a class="nav-link btn-lg btn-outline-warning p-3 mx-2 rounded-pill" href="https://discord.gg/395rp63rCY">Join Official Server</a>
</li>
<li>
<a class="nav-link btn-lg btn-outline-warning p-3 mx-2 rounded-pill" href="https://discord.com/api/oauth2/authorize?client_id=821958079670124614&permissions=8&scope=bot">Invite</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="text-center mx-5">
<br>
<br>
<section id="main-buttons" class="row">
<div class="rounded-pill p-3 shadow border border-dark border-2 floating container-fluid" style="background-color:#2B2E33 ">
<div class="buttons">
<h1 class="display-5 text-center mt-5 fw-bolder multicolortext">Idle Baker</h1>
<h3 class="display-10 text-center mt-3 mb-4 fw-bold ">The bot to make your server perfect </h3>
<a href="https://discord.com/api/oauth2/authorize?client_id=821958079670124614&permissions=8&scope=bot " class="btn btn-lg btn-outline-warning p-3 box-glow btn-block btn-primary-spacing ">Add to Server</button></a>
<a href="https://discord.gg/395rp63rCY " class="btn btn-lg btn-outline-warning p-3 btn-block btn-primary-spacing box-glow">Join Support Server</button></a>
<a href="https://top.gg/bot/821958079670124614/vote " class="btn btn-lg btn-outline-warning p-3 btn-block btn-primary-spacing box-glow">Vote for Rewards</button></a>
</div>
<br>
<br>
</div>
</section>
</div>
<div>
<br>
<br>
<br>
<div class="text-center mx-4 ">
<a href="#bake-command">
<i class="fas fa-chevron-down center animate__animated animate__rubberBand animate__infinite animate__slow fa-5x fa_color animate__delay-3s "></i>
</a>
</div>
<br>
<br>
</div>
<div class="text-center mx-5 my-1">
<br>
<section class="floating" id="bake-command">
<div class="row justify-content-center align-items-center rounded-pill p-5 shadow border border-dark border-2 " style="background-color:#2B2E33 ">
<div class="col mx-3 p-5 ">
<h1 class="multicolortext">Bake Stuff</h2>
<br>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic similique perferendis aliquam ad, praesentium asperiores sapiente delectus ipsum, ut doloribus fuga consequuntur repudiandae repellendus nam dolores assumenda atque quidem
maiores.
<br>
</div>
<div class="col mx-3">
<img src="./assets/bake_command.png " class="img-fluid ">
</div>
</div>
<br>
<br>
</section>
</div>
<div class="text-center mx-5 my-1">
<section class="floating" id="sell-command">
<div class=" row justify-content-center align-items-center rounded-pill p-5 shadow border border-dark border-2 " style="background-color:#2B2E33 ">
<div class="col mx-3 ">
<img src="./assets/sell_command.png " class="img-fluid">
</div>
<div class="col mx-3 p-5 ">
<h1 class="multicolortext">Sell it</h2>
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam ex a eaque harum voluptas, pariatur ipsa inventore alias accusantium quisquam numquam eveniet accusamus eos in. Temporibus quasi vitae repellendus tempora?
<br>
</div>
</div>
<br>
<br>
</section>
</div>
<div class="text-center mx-5 my-1">
<section class="floating" id="shop-command">
<br>
<div class="row justify-content-center align-items-center rounded-pill p-5 shadow border border-dark border-2" style="background-color:#2B2E33 ">
<div class="col mx-3 p-5 ">
<h1 class="multicolortext">Buy Upgrades</h2>
<br>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic similique perferendis aliquam ad, praesentium asperiores sapiente delectus ipsum, ut doloribus fuga consequuntur repudiandae repellendus nam dolores assumenda atque quidem
maiores.
<br>
</div>
<div class="col mx-3 ">
<img src="./assets/shop_command.png " class="img-fluid">
</div>
</div>
<br>
<br>
</section>
</div>
<div class="text-center mx-5 my-1">
<section class="floating" id="vote-for-us">
<div class="row justify-content-center align-items-center rounded-pill p-5 shadow border border-dark border-2 " style="background-color:#2B2E33 ">
<h1 class="multicolortext">Vote and Earn Rewards</h2>
<br>
<br>
<h4 class="strong">Earn ,000 in-game currency and 2 bakers (30 minutes each)</h4>
<div class="col mx-3">
<a href="https://top.gg/bot/821958079670124614">
<img src="https://top.gg/api/widget/821958079670124614.svg" alt="Idle Baker" width="350px" height="350px">
</a>
</div>
<div class="col mx-3">
<a href="https://discordbotlist.com/bots/821958079670124614">
<img src="https://discordbotlist.com/api/v1/bots/821958079670124614/widget" alt="Idle Baker" width="382px" height="214px" class="shadow">
</a>
</div>
</div>
<br>
<br>
</section>
</div>
<section id="footer"></section>
</div>
<br>
<br>
您是否在真实的移动设备上打开过该页面？试试看，然后告诉我们。
但是马上你将需要媒体查询来为不同的视口正确调整元素的大小。
这是 MDN 文档
您的代码存在元标记问题。由于 "viewport "
中的 space in ""，浏览器未将您的视口元标记视为预期的内容
<meta name="viewport " content="width=device-width, initial-scale=1.0 ">
这导致响应中断。将其更改为 "viewport" 并检查其他标签中的 spaces。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
我正在为我的 discord 机器人 - Idle Baker 创建一个网站。对于这个网站，我决定使用最新的 Bootstrap 5 来设计，因为它比一大堆 CSS.
更容易。我已经对网站的 home-page 进行了编码，但在我可以进一步移动之前，我意识到一个问题，当我在 browser-devtools 中以移动形式加载网站时，我的元素的缩放比例，导航栏非常小。它在 PC 和更大屏幕的设备上看起来非常好。我还将提供以下代码。
这里还有 3 张图片：
普通 PC 分辨率
手机分辨率异常
外部网站上的正常移动分辨率
AOS.init();
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap');
.parallax {
background-image: url("./assets/bg_pic.png");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
backdrop-filter: blur(3px);
}
.floating {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.box-glow {
animation: glowing 3000ms infinite;
}
.fa_color {
color: #ffffff
}
.btn-primary-spacing {
margin-right: 15px;
margin-left: 15px;
margin-bottom: 5px !important;
}
.multicolortext {
background-image: linear-gradient(to right, rgb(238, 255, 0), rgb(255, 0, 64));
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
}
@keyframes floating {
0% {
transform: translate(0, 0px);
}
50% {
transform: translate(0, 15px);
}
100% {
transform: translate(0, -0px);
}
}
@keyframes glowing {
0% {
box-shadow: 0 0 -10px #c4a300;
}
40% {
box-shadow: 0 0 20px #c4a300;
}
60% {
box-shadow: 0 0 20px #c4a300;
}
100% {
box-shadow: 0 0 -10px #c4a300;
}
}
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet" />
<body style="font-family: 'Nunito', sans-serif; color:#FFFFFF" class="parallax">
<div data-aos="zoom-out" data-aos-duration="1750">
<div class="container-xxl container-fluid rounded" id="navbar-main">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand " href="http://127.0.0.1:5500/index.html">
<img src="./assets/logo.png" alt="Idle Baker " width="75 " height="75 " class="d-inline-block align-top ">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
<ul class="navbar-nav ms-auto text-center">
<li>
<a class="nav-link btn-lg btn-outline-warning p-3 mx-2 rounded-pill" href="index.html">Home</a>
</li>
<li>
<a class="nav-link btn-lg btn-outline-warning p-3 mx-2 rounded-pill" href="about.html">About</a>
</li>
<li>
<a class="nav-link btn-lg btn-outline-warning p-3 mx-2 rounded-pill" href="starter.html">Starter Guide</a>
</li>
<li>
<a class="nav-link btn-lg btn-outline-warning p-3 mx-2 rounded-pill" href="commands.html">Commands</a>
</li>
<li>
<a class="nav-link btn-lg btn-outline-warning p-3 mx-2 rounded-pill" href="donate.html">Donate</a>
</li>
<li>
<a class="nav-link btn-lg btn-outline-warning p-3 mx-2 rounded-pill" href="index.html#vote-for-us">Vote</a>
</li>
<li>
<a class="nav-link btn-lg btn-outline-warning p-3 mx-2 rounded-pill" href="https://discord.gg/395rp63rCY">Join Official Server</a>
</li>
<li>
<a class="nav-link btn-lg btn-outline-warning p-3 mx-2 rounded-pill" href="https://discord.com/api/oauth2/authorize?client_id=821958079670124614&permissions=8&scope=bot">Invite</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="text-center mx-5">
<br>
<br>
<section id="main-buttons" class="row">
<div class="rounded-pill p-3 shadow border border-dark border-2 floating container-fluid" style="background-color:#2B2E33 ">
<div class="buttons">
<h1 class="display-5 text-center mt-5 fw-bolder multicolortext">Idle Baker</h1>
<h3 class="display-10 text-center mt-3 mb-4 fw-bold ">The bot to make your server perfect </h3>
<a href="https://discord.com/api/oauth2/authorize?client_id=821958079670124614&permissions=8&scope=bot " class="btn btn-lg btn-outline-warning p-3 box-glow btn-block btn-primary-spacing ">Add to Server</button></a>
<a href="https://discord.gg/395rp63rCY " class="btn btn-lg btn-outline-warning p-3 btn-block btn-primary-spacing box-glow">Join Support Server</button></a>
<a href="https://top.gg/bot/821958079670124614/vote " class="btn btn-lg btn-outline-warning p-3 btn-block btn-primary-spacing box-glow">Vote for Rewards</button></a>
</div>
<br>
<br>
</div>
</section>
</div>
<div>
<br>
<br>
<br>
<div class="text-center mx-4 ">
<a href="#bake-command">
<i class="fas fa-chevron-down center animate__animated animate__rubberBand animate__infinite animate__slow fa-5x fa_color animate__delay-3s "></i>
</a>
</div>
<br>
<br>
</div>
<div class="text-center mx-5 my-1">
<br>
<section class="floating" id="bake-command">
<div class="row justify-content-center align-items-center rounded-pill p-5 shadow border border-dark border-2 " style="background-color:#2B2E33 ">
<div class="col mx-3 p-5 ">
<h1 class="multicolortext">Bake Stuff</h2>
<br>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic similique perferendis aliquam ad, praesentium asperiores sapiente delectus ipsum, ut doloribus fuga consequuntur repudiandae repellendus nam dolores assumenda atque quidem
maiores.
<br>
</div>
<div class="col mx-3">
<img src="./assets/bake_command.png " class="img-fluid ">
</div>
</div>
<br>
<br>
</section>
</div>
<div class="text-center mx-5 my-1">
<section class="floating" id="sell-command">
<div class=" row justify-content-center align-items-center rounded-pill p-5 shadow border border-dark border-2 " style="background-color:#2B2E33 ">
<div class="col mx-3 ">
<img src="./assets/sell_command.png " class="img-fluid">
</div>
<div class="col mx-3 p-5 ">
<h1 class="multicolortext">Sell it</h2>
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam ex a eaque harum voluptas, pariatur ipsa inventore alias accusantium quisquam numquam eveniet accusamus eos in. Temporibus quasi vitae repellendus tempora?
<br>
</div>
</div>
<br>
<br>
</section>
</div>
<div class="text-center mx-5 my-1">
<section class="floating" id="shop-command">
<br>
<div class="row justify-content-center align-items-center rounded-pill p-5 shadow border border-dark border-2" style="background-color:#2B2E33 ">
<div class="col mx-3 p-5 ">
<h1 class="multicolortext">Buy Upgrades</h2>
<br>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic similique perferendis aliquam ad, praesentium asperiores sapiente delectus ipsum, ut doloribus fuga consequuntur repudiandae repellendus nam dolores assumenda atque quidem
maiores.
<br>
</div>
<div class="col mx-3 ">
<img src="./assets/shop_command.png " class="img-fluid">
</div>
</div>
<br>
<br>
</section>
</div>
<div class="text-center mx-5 my-1">
<section class="floating" id="vote-for-us">
<div class="row justify-content-center align-items-center rounded-pill p-5 shadow border border-dark border-2 " style="background-color:#2B2E33 ">
<h1 class="multicolortext">Vote and Earn Rewards</h2>
<br>
<br>
<h4 class="strong">Earn ,000 in-game currency and 2 bakers (30 minutes each)</h4>
<div class="col mx-3">
<a href="https://top.gg/bot/821958079670124614">
<img src="https://top.gg/api/widget/821958079670124614.svg" alt="Idle Baker" width="350px" height="350px">
</a>
</div>
<div class="col mx-3">
<a href="https://discordbotlist.com/bots/821958079670124614">
<img src="https://discordbotlist.com/api/v1/bots/821958079670124614/widget" alt="Idle Baker" width="382px" height="214px" class="shadow">
</a>
</div>
</div>
<br>
<br>
</section>
</div>
<section id="footer"></section>
</div>
<br>
<br>
您是否在真实的移动设备上打开过该页面？试试看，然后告诉我们。
但是马上你将需要媒体查询来为不同的视口正确调整元素的大小。
这是 MDN 文档
您的代码存在元标记问题。由于 "viewport "
<meta name="viewport " content="width=device-width, initial-scale=1.0 ">
这导致响应中断。将其更改为 "viewport" 并检查其他标签中的 spaces。
<meta name="viewport" content="width=device-width, initial-scale=1.0">