文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在移动设备上，网站元素太小了。

问在移动设备上，网站元素太小了。
EN

Stack Overflow用户
提问于 2021-09-11 14:35:12
回答 2查看 218关注 0票数 0

我正在为我的不和机器人- Idle Baker制作一个网站。对于这个网站，我决定使用最新的自举5来设计，因为它比很多CSS都容易。

我已经对网站的主页进行了编码，但在我进一步移动之前，我意识到了一个问题，当我在browser-devtools中以移动形式加载网站时，我的元素、导航条的缩放非常小。它在个人电脑和更大的屏幕设备上看起来很好。我也将提供下面的代码。

这里还有3张图片：

普通PC分辨率

​

异常移动分辨率

​

普通移动解决方案在外部网站上的应用

​

​

代码语言：javascript
复制
AOS.init();
代码语言：javascript
复制
@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;
  }
}
代码语言：javascript
复制
<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 $10,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>

​

html
css
mobile-website
bootstrap-5
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-09-12 17:33:33

代码的问题在于元标记。您的viewport meta标记没有被浏览器视为它的意图，因为在“"viewport "”中有一个空格。

代码语言：javascript
复制
<meta name="viewport " content="width=device-width, initial-scale=1.0 ">

这会导致反应中断。将其更改为"viewport"，并检查其他标记中的空格。

代码语言：javascript
复制
<meta name="viewport" content="width=device-width, initial-scale=1.0">
票数 2
EN

Stack Overflow用户

发布于 2021-09-11 14:42:22

您在实际的移动设备上打开页面了吗？试试，然后告诉我们。

但是，在一开始，您将需要媒体查询，以适当地大小您的元素为不同的视图。

以下是MDN文档

使用媒体查询

票数 -2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/69143945

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档