我需要我的 Web 应用程序作为 native 移动应用程序运行。为此，我需要防止在所有浏览器上进行捏合缩放和双击缩放。在 Chrome 和 Firefox 中这很容易:
<meta name="viewport" content="width=device-width, user-scalable=no" />
在 Safari 上是一个挑战。 Here我发现了如何防止捏合缩放和禁用双击缩放。但是当你滚动和捏缩放时，它的缩放。我的问题是是否有办法在滚动时也阻止它？
在您的链接中结合javascript preventDefault 解决方案；您可以使用以下方法在页面范围内禁用捏合。
<style>
html,
body {
position: fixed;
overflow: hidden;
}
</style>
并使用以下 CSS 将 中的所有内容包装在主包装器中
<style>
.mainwrapper {
width: 100vw;
height: 100vh;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
</style>
<body>
<div id="master_wrap">
...content...
</div> <!-- /master wrapper -->
</body>
您实际上禁用了所有 body/html 级别的滚动，然后在主包装器内重新启用滚动以下级别，其中包括弹性和动量滚动。当这些元素滚动时，捏合已经被忽略了。
缺点
1 - 如果你有 fixed 或 absolute 元素，那么滚动会变得很卡顿。
2 - 似乎还有一个奇怪的错误——如果你从页面的高处向下滚动，页面的一部分将被修改，并且捏合再次可用。我认为这可能与 vh 属性有关，并且可能有一个 JS 解决方案可以更好地设置元素的高度/宽度。
关于ios - 如何防止在 Safari 移动浏览器上捏缩放(滚动)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49349637/
| 欢迎光临 OStack程序员社区-中国程序员成长平台 (https://ostack.cn/) | Powered by Discuz! X3.4 |