リンク文字をタッチしても色が変わらない --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

「Google Apps」無償版の新規登録が終了

以前、「Google Apps」を利用した以下の記事を書きましたが、とうとう無償版の新規登録が終了

記事を読む

no image

研究室での進捗報告の方法について、ふと思ったこと

* 以下に加筆・修正して移動しました。

記事を読む

no image

CAPTCHAの導入方法 -KCAPTCHAの導入-

CakePHP(1.2、1.3)にKCAPTCHAを導入してみたのでメモ。 * CAPTCHA

記事を読む

githubを使っての開発(1) -実践github-flow-

今は開発でgithubを利用しています。 開発をおこなう上で、githubをどのように扱えば良いの

記事を読む

Jenkins + iPhoneアプリ(番外1) -TestFlightを利用する-

* これまで - -- 執事(Jenkins)を雇いました。 * やりたいこと Jenk

記事を読む

no image

CakePHP1.3でテストコード(1) -モデルのテスト-

CakePHP1.3ではSimpleTestを用いてテストコードを書きます。 ※CakePHP2系で

記事を読む

no image

複数アカウントでgithubを使う

1つの端末で複数のアカウントを使いたくなったので、その方法を整理してみた。 流れとしては以下のとおり

記事を読む

no image

jQueryMobileでタッチ(スワイプ)してページ遷移 -Paginationプラグインの利用-

スマートフォン対応をしていてタッチしてページ遷移させたいケースがあるかと思います。 そんな時に便利

記事を読む

スクリーンショット 2013-04-27 11.46.12

githubを使っての開発(2) -masterブランチにマージ-

前エントリーでgithub-flowをもとにした流れを書いたのですが、その中のマージについてもう少し

記事を読む

Jenkins + DeployGate(2) -DeployGateにアプリをアップ!-

DeployGateを使ってますか? 継続的にDeployってますか? TestFlightの

記事を読む

広告

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 ↑