时间戳

首页 > 解决方案 > 使用 Bulma 制作的视图布局未按预期显示在手机上

html - 使用 Bulma 制作的视图布局未按预期显示在手机上

问题描述

我有一个使用 . 制作的网络应用程序Bulma + Django。在浏览器中一切看起来都很好，当我缩小浏览器时它也可以。它按我的预期工作。

然后我用ngrok真实的手机测试了视图，这就是问题所在。

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

这是一张显示差异的图片： 在此处输入图像描述

如何让手机版看起来像桌面缩小版？我在代码中遗漏了什么？我尝试使用is-mobile该类，但它没有用。

这是我的 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>

标签： htmlcssiphonefrontendbulma

解决方案

在你的头部使用这个：

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

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

推荐阅读