お問い合わせはコチラから

iphoneで2回タッチしないとリンクが飛ばない時の対処方法

サイト運営

Webサイトを制作してスマホで動作を確認すると、リンクを2回タップしないとリンク先に飛ばない時が結構あります。

あと、バナーなどにhoverをつけているのに、スマホの場合はそもそもタッチしてしまうのでhoverが効かないように見えるという現象もあります。

この問題はiOS特有の不具合のようで、昔からjavascriptなどで対策されているようです。

この記事ではスマホで2回タップしないとリンク先に飛ばない問題と、スマホでもhoverのアクションが起こるように属性を追加する修正方法についてまとめておきます。

スマホだとhoverが効かない問題

よく考えてみると当たり前なのですが、スマホの場合はhoverが無視されます。

スマホの場合はhoverという動き自体がタッチする操作と区別できないのでhoverは無視されるわけです。

これは避けようが無いのでは?と思っていたのですが、属性を追加するとことで、タッチした時にリンクに飛ぶ動作とhover動作を同時にさせることができることがわかりました。

スマホだとhoverが効かない問題の対策

親要素にontouchstart=””という属性を追加すればよいです。

こうすることで、リンク先に飛ぶ前にhoverのアクションが動くようになります。

ontouchstart=””はbodyタグにつけておけば子要素すべてが対象になります。

<body ontouchstart="">
  <div id="wrapper">
    <div class="box"></div>
  </div>
</body>

スマホ(iOS)だと2回タップしないとリンク先に飛ばない問題

この原因は、hoverなどが当たっている場合のiOSのバグが影響しているようです。

こちらも先ほどと同じ対策で解決します。

スマホだと2回タップしないとリンク先に飛ばない問題の対策

ontouchstart=””を親要素につければ大丈夫です。bodyタグにつけておけば子要素すべてが対象になります。

<body ontouchstart="">
  <div id="wrapper">
    <div class="box"></div>
  </div>
</body>

ontouchstart属性の追加方法

ontouchstart属性を追加すればいいのはわかっても、実際追加するのは結構面倒だったりします。

WordPressの場合は、header.phpにbodyタグの開始があると思いますので、そこに追加すればいいのですが、子テーマの作成も必要ですし、header.phpの他の変更が親テーマにあったときに一緒に修正しなければならない問題もあります。

body ontouchstart=””とかく代わりに、javascriptで以下のいずれかを記載しても同じ効果が得られるようです。

window.ontouchstart = function() {};
window.addEventListener('touchstart', function() {}, true);
window.addEventListener('touchstart', function() {}, false);
document.ontouchstart = function() {};
document.addEventListener('touchstart', function() {}, true);
document.addEventListener('touchstart', function() {}, false);
document.body.ontouchstart = function() {};
document.body.addEventListener('touchstart', function() {}, true);
document.body.addEventListener('touchstart', function() {}, false);

参考:https://neos21.net/blog/2018/08/19-01.html

番外編:buttonタグのaタグの組み合わせが問題を起こすこともある

buttonタグとaタグを組み合わせた時にスマホで数回タップしないと反応しない現象がおきました。

まとめ

モバイルファーストと言われて久しいですが、実機で確認して動きがおかしかった時は絶望的な気分になります。PCでスマホエミュレーターで動きが再現すれば解析できるのですが、実機でしか起きない問題は解析するのも対策するのも大変です。

もし、今回の取り上げた現象でお悩みの場合、もしくは今後出くわした場合、今回の記事を思い出していただければ簡単に対策できると思います。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました