打开菜单时，网站会缩小

Question

我使用雅虎的PureCSS库以及侧边栏的插件，除了移动版Safari之外，它在所有浏览器上运行良好。出于某种原因，只要打开菜单，它就会缩小。这甚至发生在文档的example中。我不知道是什么导致这种情况，但它很容易被称为浏览器错误。

如果需要，我可以把JSFiddle放在一起。

Answer 1

视口元标记不包含最大比例值。如果您将视口标记更新为以下内容，则只要用户点击菜单，您就不会获得相同的缩放：

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

请注意在字符串末尾添加maximum-scale=1。添加此内容后，内容将滑过而不是缩小。这是针对与PureCSS相关联的Responsive Side Menu演示页面进行测试的。

Answer 2

这个问题实际上归结为与Does overflow:hidden applied to work on iPhone Safari?相同。我想当用户打开菜单时，Mobile Safari将缩小以为菜单和内容区域腾出空间，除非你在包装元素上执行此操作：

html,
body {
    overflow-x: hidden;
}