スマホサイトでピンチアウトによる拡大をさせたくない時にやること

まずはJavaScriptで書いてみた

(".hoge").addEventListener("touchstart", function(event) {
    if (event.touches.length > 1) {
        event.preventDefault();
    }
}, {passive: false});

• ここでのポイント
• event.touches.lengthにタッチ中の指の本数が格納されている
• event.preventDefault();で拡大をキャンセルしている
• {passive: false}をつけないとpreventDefault()が効かない

ここで問題が発生

指一本でスクロールしながらもう一本指を増やすとピンチアウトが有効になる

解決策

.hoge {
    touch-action: pan-y;
}

CSSにこれを指定するだけで実は済む。
touch-action