打开/关闭菜单时HTML在iOS中放大/缩小

Posted 2023-02-25

【中文标题】打开/关闭菜单时HTML在iOS中放大/缩小

【英文标题】：HTML zooms in/out in iOS when open/closing a menu

【发布时间】：2012-05-01 02:33:07

【问题描述】：

我正在使用类似于 Facebook 的菜单开发一个移动网站，除了移动版 Safari 之外，一切都运行良好。问题是，一旦我在 iPhone 上打开菜单，其余内容会缩小以适应屏幕，然后在菜单关闭时重新放大。

为了让它更有趣，这只在浏览器中运行时才会发生 - 如果您将其添加到主屏幕，则内容不会调整大小。它也不会在 iPad 上调整大小，只是在 iPhone 上。

我这里有一个简化版的代码：http://jsfiddle.net/HYjEB/261/

如果你有 iPhone，你可以在这里看到运行的问题：http://tfklabs.com/clients/mypr/

我尝试了几件事，包括将#right div 设置为 position:fixed 而不是 position:absolute。它确实有效，但是用户无法滚动页面的内容。

【参考方案1】：

如果您不想缩放 div，则需要将其滑入其父级。看看这个：http://jsfiddle.net/HYjEB/262/。我也对您的 html 结构和 css 进行了一些更改。

【讨论】：

修复了缩放，但禁用了垂直滚动。添加overflow:scroll; -webkit-overflow-scrolling: touch; 修复了该部分并再次为其提供动力。谢谢！

太棒了。我很高兴能帮上忙。