html - “视图宽度”属性无法正常工作

Question

我有一个网站，我想根据屏幕宽度动态调整标题文本的大小。我还想为小屏幕设置默认的最小文本大小。为了完成这一壮举，我使用了以下 css：

@media (max-width: 768px) {
  .welcome {
    font-size:30pt;
  }
  .welcome-subtitle {
    font-size:12pt;
  }
}
@media (min-width: 769px) {
  .welcome {
    font-size:6vw;
  }
  .welcome-subtitle {
    font-size:1.8vw;
  }
}

和下面的html

<h1 class="welcome"> <span style="font-weight:200;">Meet</span> <code class="text-nowrap">iSwiftUI</code> </h1>

一切都很好。但是，当我推送该网站时，一些用户报告说标题文本大小太小了。它默认为我们的最小文本大小。预期行为和以下错误的屏幕截图。

编辑：图片一是在 Chrome 版本 86.0.4240.75 上拍摄的。图二是在 Chrome 版本 85.0.4183.121 上拍摄的。

标签： htmlcss