Question

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

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

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

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

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

我在这里错过了什么关键概念？我假设它可能是身体上的缩放属性。如何确保我的标题在所有设备上都是50px？

截屏：

https://www.google.com/?result_code=FAILURE&result_message=Account+linking+failed

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

Answer 1

您可能缺少视口元标记，以控制移动浏览器上的布局。

<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?

响应式CSS v.Chrome的响应式视图

1 个答案: