html - 为什么我的 h1 在桌面浏览器中的宽度与在 iPhone 上的宽度不同？

Question

我正在写一个响应式网页，首先我添加了 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">标签，所以我猜它在桌面和智能手机设备上具有相同的行为。小问题是我的 <h1>的宽度以不同的方式渲染。我解释得更好。

这是我的标题代码:

<header>
   <h1>...</h1>
</header>

这是 CSS 代码:

@media only screen and (min-width: 320px) and (max-width: 480px) {
   header {
      min-height: 100vh;
   }

   header h1 {
      width: 70%;
      font-size: 2em;
   }
}

白色 viewport标记网页的外观应该是相同的，无论是使用智能手机还是调整网页大小。我看到当我将桌面浏览器窗口的大小时调整为 iPhone 的大小时，我看到的是没有换行符(标题全部在一行中)，而不是使用 iPhone，标题有换行符。我不明白这一点，因为行为应该是相同的。

Answer 1

您可以使用 width: auto 或 width: 100vw