如何防止在Safari移動瀏覽器上捏縮放（滾動）？

Question

我需要我的Web應用程序充當本地移動應用程序。 為此，我需要防止在所有瀏覽器上進行捏縮放和雙擊縮放。 在Chrome和Firefox中，這很容易：

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

在Safari上，這是一個挑戰。 在這里，我找到了如何防止捏縮放和禁用雙擊縮放。 但是，當您滾動並捏以縮放時，它就會縮放。 我的問題是是否還有辦法在滾動時阻止它？

Answer 1

與您的鏈接中的javascript preventDefault解決方案結合使用； 您可以使用以下內容在整個頁面上禁用放大和縮小。

<style>
html,
body {
  position: fixed;
  overflow: hidden;
}
</style>

並使用以下CSS將所有內容包裝在主包裝器的<body>中

<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解決方案可以更好地設置元素的高度/寬度。

Answer 2

如果要忽略所有可以滾動正文內容的事件，可以將函數綁定到touchmove事件，以防止默認行為並停止事件的傳播：

document.body.addEventListener("touchmove", function(event) {
    event.preventDefault();
    event.stopPropagation();
}, false);

在jQuery或類似的庫中：

$(document.body).on("touchmove", function(event) {
    event.preventDefault();
    event.stopPropagation();
});

鏈接

如何防止在Safari移動瀏覽器上捏縮放（滾動）？

問題描述

2 個解決方案

解決方案1
0 2018-08-14 23:09:12

解決方案2
0 2018-11-21 17:52:26

如何防止在Safari移動瀏覽器上捏縮放（滾動）？

問題描述

2 個解決方案

解決方案1 0 2018-08-14 23:09:12

解決方案2 0 2018-11-21 17:52:26

解決方案1
0 2018-08-14 23:09:12

解決方案2
0 2018-11-21 17:52:26