iPadでaタグのアンカーがクリック動作しない時の対処法。:hoverなど疑似要素をチェック

web制作

アンカーを仕込んだaタグにafter、before、hoverなどの疑似要素を使ってcss3アニメーションを実装している場合は、iPhoneやiPadでタップした時、先にアニメーションが実施されて、二回目のタップでアンカー動作、という振る舞いになる時があります。

対処法

こういう時は、面倒ですが、以下の対応が必要となります。

・メディアクエリ(css)でスマホとタブレットの問題となる疑似要素を外す

・ユーザーエージェント処理(jsやphp)でスマホとタブレットの問題となる疑似要素を外す

とくに、パソコンの画面をそのままタブレットに反映している時に発生しやすい現象です。

cssではどうにも難しい場面も多いので、jsやphpで、特定のユーザーエージェントにおいては、疑似要素をなくすような処理をしたコードを持っておくと便利です。

最後に一言

端末あれこれ増え過ぎて、もう大変ですね・・・。

この記事をSNSでシェアする?

iPadでaタグのアンカーがクリック動作しない時の対処法。:hoverなど疑似要素をチェック


  • 0
    このエントリーをはてなブックマークに追加
  • Pocket

PROFILE

yoshi

KIYOTATSU(キヨタツ)を運営しているウェブ制作者のYoshiです。得意な分野はディレクションとコーディングです。デザインはシンプルなものだけ可能です。他、色々と随時習得中です。