在 IOS Safari 中為 Web 應用禁用捏合縮放？

Question

如何使用 javascript 或 css 或其他方式在 safari/ios/iphone 的 html 頁面上禁用縮放、捏合縮放和雙擊縮放？

Answer 1

首先，您需要檢查您的網絡應用程序是否正在 safari 瀏覽器上使用。 這就是您對不同瀏覽器的處理方式。

<script>
    let browserName = "";

    if(navigator.vendor.match(/google/i)) {
        browserName = 'chrome/blink';
    }
    else if(navigator.vendor.match(/apple/i)) {
        browserName = 'safari/webkit';
    }
    else if(navigator.userAgent.match(/firefox\//i)) {
        browserName = 'firefox/gecko';
    }
    else if(navigator.userAgent.match(/edge\//i)) {
        browserName = 'edge/edgehtml';
    }
    else if(navigator.userAgent.match(/trident\//i)) {
        browserName = 'ie/trident';
    }
    else
    {
        browserName = navigator.userAgent + "\n" + navigator.vendor;
    }
    alert(browserName);
</script>

然后，如果瀏覽器實際上是 safari，您可以在 If 條件內禁用縮放。 一種選擇是為觸摸事件設置處理程序window.addEventListener("touchstart", touchHandler, false); 然后寫一個touchHandler函數

function touchHandler(event){
    if(event.touches.length > 1){
        //the event is multi-touch
        //you can then prevent the behavior
        event.preventDefault()

同樣，您可以在捏合時禁用縮放

document.addEventListener("touchmove", function(e){
    e.preventDefault();
},{passive: false});

這里有更多關於觸摸事件的額外資源https://mobiforge.com/design-development/html5-mobile-web-touch-events 。 您必須為不同的觸摸事件設置處理程序，以防止根據瀏覽器的默認捏縮放行為。 請參考這個http://www.quirksmode.org/mobile/default.html