web-dev-qa-db-ja.com

IOS HTMLはダブルタップしてズームを無効にします

私は主にデータ入力に焦点を当てたウェブサイトを設計しています。フォームの1つに、フォームフィールドの数値をすばやく増減するためのボタンがあります。私が使っていた

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

iOS用のFirefoxアプリを使用して動作するように見えるズームを無効にします。ただし、別のユーザーがSafariでテストすると、ボタンのクリックが速すぎてページが拡大され、ユーザーの注意が散漫になり、値をすばやく増やすことができなくなりました。 IOS 10 ,、 Appleアクセシビリティの理由でuser-scalable = noが削除されたため、Firefoxなどのサードパーティのブラウザでのみ動作する理由です。ダブルタップズームを無効にするのに最も近いのはこれでした

var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
    var now = (new Date()).getTime();
    if (now - lastTouchEnd <= 300) {
        event.preventDefault();
    }
    lastTouchEnd = now;
}, false);

from https://stackoverflow.com/a/38573198 ただし、これによりクイックタップが完全に無効になります。ダブルタップズームはできませんが、ユーザーが値をすばやく入力することもできません。ダブルタップズームを無効にしながら、ボタンをすばやく押すことができる方法はありますか？

javascripthtmliosiphoneios10
13
tchatow

CSSプロパティtouch-action私のために働く。 iOS 11.1でテスト済み。

button {
    touch-action: manipulation;
}

詳細については、MDNを参照してください： https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

37
Greg Smith

次のコードを使用して、この問題を解決することになりました。 グレッグの答えを参照してください 上記

$(document).click(function(event) {
    element = document.elementFromPoint(event.clientX, event.clientY);
    if(document.getElementById("div_excluded_from_doubletap").contains(element)) {
        event.preventDefault();
        clickFunction(element);
    }
});
2
tchatow