如何防止在 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;
    }

或者，檢查您的頁面內容並查看是否有任何容器溢出，然后將上述內容應用於該特定容器，或解決問題本身的原因。 調試調試調試！