响应式 CSS 诉 Chrome 的响应式视图

Question

我正在处理页面顶部带有标题的页面模板。没什么复杂的：

<div class="top-header">
text
</div>

.top-header {
    width: 100%;
    height: 50px;
}

在 Chrome 中，这会产生我所期望的...顶部 50 像素高和视口一样宽的条形图。调整浏览器的大小随宽度变化，但不随高度变化，高度固定为 50 像素。

但是，使用 Chrome 的开发人员工具，我意识到在响应模式下查看时，标题会垂直调整大小。从本质上讲，存在一定程度的整页缩放。

我在这里缺少什么关键概念？我认为它可能是身体上的缩放属性。如何确保我的标题在 所有 设备上为 50 像素？

屏幕截图：

顶部使用 Chrome 的响应模式，底部只是将 Chrome 调整为相同的宽度，而不使用响应模式。

Answer 1

您可能缺少 viewport 元标记，用于控制移动浏览器上的布局。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

来自Apple's documentation：

iOS 上的 Safari 以适用于大多数网络的比例显示网页 最初为桌面设计的内容。如果这些默认设置 不适用于您的网页，强烈建议您更改 通过配置视口进行设置。你特别需要 如果您要专门设计网页，请配置视口 IOS。配置视口很容易——只需添加一行 HTML 到 您的网页——但要了解视口属性如何影响 在 iOS 上展示您的网页更加复杂。前 配置视口，您需要更深入地了解 可见区域和视口在 iOS 上。

另一个anwser很好地解释了为什么需要指定它：Is the viewport meta tag really necessary?