みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

iPhoneのSafariでダブルタップを無効にする(iOS10でもどうしてもuser-scalable=noを有効にしたい場合とか)

iPhoneのSafariで表示されているページをダブルタップをするとページが拡大します。
metaタグでページの拡大を止めている場合はページがスクロールします。

f:id:kimizuka:20160729111011g:plain

http://jsrun.it/kimmy/AJce
※ iPhoneで見てください

ダブルタップによるページの拡大を止めつつ、ページのスクロールも止めたい場合の対策を考えたのですが、
試しにtouchendが発生してから0.2秒間touchstartを無効にしたら期待通りの動作になりました。
ただしダブルタップ全般の動作が効かなくなるはずなので注意が必要です。

f:id:kimizuka:20160729111308g:plain

http://jsrun.it/kimmy/AJce
※ iPhoneで見てください


JavaScript

(function(win, doc) {
    
    "use strict";
    
    var tapFlag = false,
        timer;
    
    doc.body.addEventListener("touchstart", function(evt) {
        if (tapFlag) {
            evt.preventDefault();
        }
    }, true);

    doc.body.addEventListener("touchend", function(evt) {
        tapFlag = true;
        clearTimeout(timer);
        timer = setTimeout(function() {
            tapFlag = false;
        }, 200);
    }, true);
    
})(window, document);



https://twitter.com/ki_230/status/879142226764251136

ツイッターやってます!