我的引导页面无法在移动设备上正确显示

Question

在几门课程和小网站之后，我试图创建我的第一个更大的页面。当我在 PC 上查看它时，我将 chrome 页面调整为最小宽度，看起来不错，但是当我在移动设备上打开它时，它看起来很奇怪，或者元素太小。我使用引导程序作为框架。你能帮助我吗？谢谢！

这是整个网页代码：https://codepen.io/dominik-smolinsk-/pen/yLgPNmo

<div class="quiz hide container-fluid">
  <div>Score:<span class="score">0</span>/6</div>
  <h1 class="text-center quest">Question?</h1>
  <div class="container">
    <div class="row text-center" style="font-size: 1.2em;">
      <div class="col-lg-6 b bt1 p-1 m-1">
        <p class="an1">Answer1</p>
      </div>
      <div class="col-lg-6 b bt2 p-1 m-1">
        <p class="an2">Answer2</p>
      </div>
      <div class="col-lg-6 b bt3 p-1 m-1">
        <p class="an3">Answer3</p>
      </div>
      <div class="col-lg-6 b bt4 p-1 m-1">
        <p class="an4">Answer4</p>
      </div>
    </div>
    <button type="button" class="btn btn-secondary nextQ hide">Next Question</button>
  </div>
</div>

Answer 1

您忘记在 head 部分添加此元标记

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