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

公開日: : IT, jQueryMobile


 背景

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]

広告

関連記事

no image

str_padとsprintfの速度

PHPで同じことが出来る「str_pad」と「sprintf」。 今まではsprintfを使う機会

記事を読む

no image

iPhoneアプリ開発 −iOS6からの「写真」へのアクセス問題−

写真を扱うアプリを開発している際に問題になったこと。 ※結構前の話を今更まとめてみる。 * 写真へ

記事を読む

jenkins-files

Windows環境でもJenkins -執事さんとご対面-

Trac Lightningに同梱されていますし、Windows環境でHudsonを使っている人は結

記事を読む

no image

PhoneGapを触ってみた(2) -実機でテスト編-

* 今までの流れ - * 自分の端末で動かしてみよう 今回は、PhoneGapで作成したアプリを実

記事を読む

no image

iPhoneアプリ開発 芳名帳アプリ作成(3) -名前を書けるようにする-

* 今までの流れ - -[http://pplace.jp/2013/06/1531/:title=

記事を読む

no image

MySQLのバックアップ手順 -消えたら困るものはバックアップ-

そろそろデータが消えてもらったら困るぐらいになっていたのでバックアップをとることにしました。 とい

記事を読む

no image

mailtoリンクの件名や本文の文字化け -N-02Aのケース-

* mailtoリンクの仕様 携帯電話用のWebサイトではmailtoリンクを使うことが多いと思い

記事を読む

iPhoneアプリ開発 芳名帳アプリ作成(1) -最初の一歩-

* 作るアプリ 結婚式や2次会で「自分の名前を書く」芳名帳 これをアプリで作ってみます。

記事を読む

no image

jQuery Mobileでミスしたこと -JSだけ最新にしてしまってレイアウト崩れたの巻-

* 前提(CDN先) jQuery Mobileを使う場合、cssを自前のサーバにおいて、jsはC

記事を読む

スクリーンショット 2012-12-06 15.34.43

iPhoneアプリ開発 -端末がネットワークにつながっているかどうか知りたい-

* やりたいこと アプリがネットに繋がっていなければアラートボックスを表示させたい。 ネットに繋

記事を読む

広告

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

広告

no image
[感想] Effective Objective-C 2.0 ☆☆☆☆★(4.5)

* 構成 - 第1章 Objective-Cに慣れる -

no image
[感想] iOSアプリテスト自動化入門 ☆☆☆(3.0)

* 構成 - Chapter 1 テスト自動化への取り組み

DeployGateを試してみた(iOS編) -DeployGateがiOSに対応-

今までのDeployGate - -[http://pplace.

iPhone/iPadアプリを開発するためにやったこと

今までに、iPhoneを3本ほどリリース((リリースしたアプリは全て1

no image
ターミナルでgitのコマンドを補完したりブランチ名を表示する – macでgitを便利に使うために –

* やりたいこと macのターミナルでgitをいじっていると -今の

→もっと見る

PAGE TOP ↑