为什么我的 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