phone 上未按预期显示使用 Bulma 制作的视图布局

Question

我有一个使用 Bulma + Django 制作的网络应用程序。在浏览器中一切看起来都很好，当我缩小浏览器时它也是如此。效果如我所料。

然后我使用 ngrok 从真实的 phone 测试视图，这就是问题所在。

在 phone 上，视图看起来“小”，就像缩小一样，看起来不像桌面浏览器版本。

这是一张显示差异的图片：

如何使 phone 版本看起来像缩小版的桌面版？我在代码中缺少什么？我尝试使用 is-mobile class，但没有用。

这是我的 HTML 代码:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
  <title>Testing Bulma</title>
</head>

<body>
  <div class="section container">

    <h1 class="title is-1">Testing Bulma!</h1>
    <h2 class="title is-2">Seems cool!</h2>
    <h2 class="subtitle">A Subtitle</h2>
    <p>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet.</p>

    <div class="control">
      <input class="input" type="text" placeholder="Text input">
    </div>

    <hr>

    <div class="buttons">
      <button class="button is-info">Info</button>
      <button class="button is-success">Success</button>
      <button class="button is-warning">Warning</button>
      <button class="button is-danger">Danger</button>
    </div>

  </div>

</body>

</html>

Answer 1

在你的头部使用这个：

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

这向浏览器提供了有关如何控制页面尺寸和缩放比例的说明。

phone 上未按预期显示使用 Bulma 制作的视图布局

View layout made with Bulma is not being displayed as expected on the phone

html

css

iphone

frontend

bulma