【javaScript】スマホのタッチ操作での拡大縮小を禁止にする

2019年5月18日2019年7月18日JavaScript

スマホで２本の指を使ってタッチすると拡大縮小ができますよね。（これをピンチイン・ピンチアウトというらしいです）

その拡大縮小をjavaScriptを使って禁止にする方法を紹介します。

前回紹介した、スマホでのスクロール禁止の方法を少し工夫するだけです。

まずは「event.touches.length」で画面をタッチしている指の数を取得します。

そして、それが２本以上であれば「event.preventDefault()」を実行させて動作をさせないようにします。

拡大縮小を禁止する場合は「no_scaling()」をよびだし、
解除したい場合は「return_scaling()」を呼び出します。

[index.js]

/**
* タッチ操作での拡大縮小禁止
*/
function no_scaling() {
    document.addEventListener("touchmove", mobile_no_scroll, { passive: false });
}

/**
* タッチ操作での拡大縮小禁止解除
*/
function return_scaling() {
    document.removeEventListener('touchmove', mobile_no_scroll, { passive: false });
}

/**
* 拡大縮小禁止
*/
function mobile_no_scroll(event) {
    // ２本指での操作の場合
    if (event.touches.length >= 2) {
        // デフォルトの動作をさせない
        event.preventDefault();
    }
}