リンク文字をタッチしても色が変わらない －-webkit-tap-highlight-colorのメモ－

　背景

jQuery Mobileを利用してスマートフォン対応をしたサイトにおいてリンク文字をタッチしても色が変わらず、タッチしたかどうかよく分からない。
リンクをdata-role=”button”にしてボタン化している場合は良いのですが、通常のリンク文字の場合は気になります。

　解決策

jQuery Mobileではcssの.ui-mobile-viewportの箇所で以下の設定をしています。

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

上記によりタッチしても色が変わらなくなっています。
これを変えれば良いのですが、既存のcssを変えるのはよくないので新たにcssを用意し以下を記述します。

.ui-mobile-viewport{-webkit-tap-highlight-color: rgba(0, 0, 0, 0.5);}

上記にすると不透明度が50%になります。
ただ、Android(Android2.3 MEDIASで調査)は「色を表示させない」行為はできるものの上記で色を変えるというのは無理のようです。
※元からあるリンク色を表示させることはできます。

今回は、上記を追加することにより対応します。

　問題点

リンク文字をタッチした際に色が出るようになったのは良いですが、ボタンなどをタッチした場合に難点があります。
.ui-btn-upなどで指定している色とは別に色が表示されてしまいます。

上記の点を考慮して利用する必要があります。

[ad#pplace-footer]