みかづきブログ その3

3ヶ月つづけてみました。

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);



ツイッターやってます!