みかづきブログ その3

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

iPhoneのSafariのデフォルトの挙動(ボタンをタップした際の色、テキスト選択、長押しで開くメニュー)をリセットしたいという想い

結論

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

でOK。


こちらのページ で検証しました。(iOS10.1のiPhone6を使用して確認)

http://jsrun.it/kimmy/ITBo



ボタンをタップした際に薄暗くなるのをなんとかしたい。

f:id:kimizuka:20161207101210j:plain
※ NOMALをタップしています。

CSS
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

CSSでタップした際の色を変更できます。
ここで透明色を指定すれば結果的に薄暗ならなくなります。

developer.mozilla.org



ボタンを長押した際に開くメニューをなんとかしたい

f:id:kimizuka:20161207101545j:plain
※ NOMALを長押ししています。

CSS
-webkit-touch-callout: none;
  • webkit-touch-calloutにnoneを指定することでメニューが開かなくなります。

defaultを指定すると開くようになります。

developer.mozilla.org



長押しでのテキスト選択をどうにかしたい

f:id:kimizuka:20161207101922j:plain
※ NOMALを長押ししています。

CSS
-webkit-user-select: none;
  • webkit-user-selectをnoneにすることによって、ユーザーが選択できなくなります。

デフォルト値はdefaultだと思いこんでいたのですが、調べてみたらtextでした。

developer.mozilla.org




おまけ ダブルタップでの拡大をどうにかしたい

iOS10になってから、user-scalable=noを指定してもテキスト等をダブルタップするとページが拡大してしまうことに悩んでいる開発者も多いと思います。
強引な手法ですが、JavaScriptでタップしてから0.2秒間タップを受け付けなくするとどうにかなります。
以前は0.15秒を推奨していたのですが、iOS10で検証するとまれに拡大してしまうことがあったので0.2秒にしました。

JavaScript
(function(win, doc) {
    
  "use strict";
    
  var INTERVAL = 200,
      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;
    }, INTERVAL);
  }, true);
    
})(window, document);

kimizuka.hatenablog.com