我的引導頁面無法在移動設備上正確顯示

Question

在幾門課程和小網站之后，我試圖創建我的第一個更大的頁面。 當我在 PC 上查看它時，我將 chrome 頁面調整為最小寬度，看起來不錯，但是當我在移動設備上打開它時，它看起來很奇怪，或者元素太小。 我使用引導程序作為框架。 你能幫助我嗎？ 謝謝！

這是 web 的完整代碼： 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">