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