为什么桌面浏览器中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