Bulma+Django开发Web应用真机测试视图缩放异常问题求解

• 项目基础技术栈：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>

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