打开菜单时网站缩小答案

【问题标题】：Site zooms out when menu is opened打开菜单时网站缩小
【发布时间】：2016-02-10 22:11:39
【问题描述】：

我正在使用 Yahoo 的 PureCSS 库以及侧边栏插件，它在除移动版 Safari 之外的所有浏览器上都运行良好。出于某种原因，只要打开菜单，它就会缩小。这甚至出现在文档的example 中。我不知道是什么原因造成的，但很容易将其称为浏览器错误。

如有必要，我可以组装一个 JSFiddle。

【问题讨论】：

【解决方案1】：

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

html,
body {
    overflow-x: hidden;
}

【讨论】：

【解决方案2】：

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

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

注意在字符串末尾添加maximum-scale=1。添加后，内容会滑过而不是缩小。这是针对Responsive Side Menu 的PureCSS 演示页面进行测试的，链接到上面。

【讨论】：