Bulma CSS在移动端视口显示异常问题求助

测试Bulma官方示例代码时，发现移动端设备上页面元素显示过小，桌面端显示正常，但在iPhone 12 Pro上显示异常，期望能像Bulma官网一样在移动端正常显示。

测试代码 #

<!DOCTYPE html>
<meta charset="UTF-8">
<html lang="zh-TW">

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
</head>

<body>
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="https://bulma.io">
        <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
      </a>

      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>

    <div id="navbarBasicExample" class="navbar-menu">
      <div class="navbar-start">
        <a class="navbar-item">
                  Home
                </a>

        <a class="navbar-item">
                  Documentation
                </a>

        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link">
                    More
                  </a>

          <div class="navbar-dropdown">
            <a class="navbar-item">
                      About
                    </a>
            <a class="navbar-item">
                      Jobs
                    </a>
            <a class="navbar-item">
                      Contact
                    </a>
            <hr class="navbar-divider">
            <a class="navbar-item">
                      Report an issue
                    </a>
          </div>
        </div>
      </div>

      <div class="navbar-end">
        <div class="navbar-item">
          <div class="buttons">
            <a class="button is-primary">
              <strong>Sign up</strong>
            </a>
            <a class="button is-light">
                      Log in
                    </a>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <section class="section">
    <h1 class="title">Section</h1>
    <h2 class="subtitle">
      A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
    </h2>
  </section>
</body>

</html>

显示效果 #

桌面端（正常）

移动端（iPhone 12 Pro，异常）

Bulma官网移动端（正常）

问题出在缺少viewport元标签，移动端浏览器会默认以桌面端宽度渲染页面再缩小显示，导致元素看起来过小。只需在<head>中添加以下代码即可解决：

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

修改后的完整代码 #

<!DOCTYPE html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<html lang="zh-TW">

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
</head>

<body>
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="https://bulma.io">
        <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
      </a>

      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>

    <div id="navbarBasicExample" class="navbar-menu">
      <div class="navbar-start">
        <a class="navbar-item">
                  Home
                </a>

        <a class="navbar-item">
                  Documentation
                </a>

        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link">
                    More
                  </a>

          <div class="navbar-dropdown">
            <a class="navbar-item">
                      About
                    </a>
            <a class="navbar-item">
                      Jobs
                    </a>
            <a class="navbar-item">
                      Contact
                    </a>
            <hr class="navbar-divider">
            <a class="navbar-item">
                      Report an issue
                    </a>
          </div>
        </div>
      </div>

      <div class="navbar-end">
        <div class="navbar-item">
          <div class="buttons">
            <a class="button is-primary">
              <strong>Sign up</strong>
            </a>
            <a class="button is-light">
                      Log in
                    </a>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <section class="section">
    <h1 class="title">Section</h1>
    <h2 class="subtitle">
      A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
    </h2>
  </section>
</body>

</html>

添加viewport标签后，浏览器会根据设备屏幕宽度调整页面渲染尺寸，Bulma的响应式样式就能正常生效，移动端显示就会和官网一致。

内容的提问来源于stack exchange，提问作者lambertk