gpt4 book ai didi

ios - 如何防止在 safari 移动浏览器上缩放(滚动)?

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:03:59 24 4
gpt4 key购买 nike

我需要我的 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>

然后把所有东西都包在<body>里面在具有以下 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 - 如果你有 fixedabsolute元素,然后滚动变得非常卡顿。

2 - 似乎还有一个奇怪的错误,如果您从页面的顶部向下滚动,页面的一部分将被修改,并且捏合再次可用。我认为这可能与 vh 有关属性,可能有一个 JS 解决方案可以更好地设置元素的高度/宽度。

关于ios - 如何防止在 safari 移动浏览器上缩放(滚动)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49349637/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com