如何防止在 HTLM5 或 javascript 中缩放/滚动

Question

我在简单的 HTML5 页面上工作，并使用下面的代码来防止缩放/滚动。

<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="full-screen" content="yes"/>
<meta name="screen-orientation" content="landscape"/>
<meta name="viewport" content="user-scalable=0"/>

Facebook 应用审核团队返回以下反馈并拒绝了我的应用。

开发人员政策 1.2 - 打造优质产品 我们发现您的游戏允许在游戏玩法之外进行缩放/滚动，这有损游戏内体验。 除非您的游戏需要这些动作来进行游戏，否则请在重新提交以供审核之前修改您的游戏。

不确定如何防止 iOS 设备在 HTML5 中缩放/滚动。 请帮忙。

Answer 1

普拉斯，
正如@lukeocom 建议的那样，如果您有溢出问题，您可以将溢出属性设置为隐藏以解决溢出问题。 但是如果你只是想禁用缩放，你可以在你的 HTML 中使用以下内容：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

这应该适用于移动设备，但不适用于桌面设备。 如果您还想在桌面上禁用缩放，您可以将事件侦听器附加到Ctrl 、 +和-键，然后在 JavaScript 中使用e.preventDefault()并对Ctrl + mousewheel事件执行相同的操作。

编辑：此外，如果您想在桌面上确定禁用缩放功能，则可以在 CSS 中使用zoom: reset 。 不过，这仅适用于 Chrome。

这些是我的消息来源：
元标记来源
JavaScript 来源
供进一步阅读的 MDN 文档

Answer 2

我不确定这是否对您有帮助，但听起来您可能有一些溢出的内容。 所以你可以尝试添加溢出：隐藏到你的 html 标签，或设置最大宽度/高度，或设置绝对或固定 position：

:root,
html {
    overflow: hidden;
    position: absolute;//or fixed
    top:0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 100vw;
    max-height: 100vh;
    }

或者，检查您的页面内容并查看是否有任何容器溢出，然后将上述内容应用于该特定容器，或解决问题本身的原因。 调试调试调试！