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

iphoneでリンクが2回タップしないと動かない時の意外な原因とその対策

サイト運営

スマホサイトで、リンクをタップしても何度かタップしないとジャンプしないという現象が発生しました。

そのリンクは、お問い合わせボタンでとび先がアンカーになっていました。

PCの検証ツールでは特に問題が起きませんが、スマホの実機のみ問題が起きます。

過去の事例から以下の内容かと思いましたが、解決しませんでした。

また、検索すると出てくるよく知られた、スマホでhoverが付いたリンクのタップが反応しないという既知の問題も該当していませんでした。

問題の記述

問題となったのは以下の記述です。

ぱっと見特に問題ないように見えますが、実は、buttonタグにリンクを張るときはaタグと組み合わせる方法は使わないのが普通です。

この書き方が原因でした。

<button>
  <a href="#contact"><img src="img/header-mail.png" alt="お問い合わせ">お問い合わせ</a>
</button>

修正方法

buttonタグを使った修正方法

<button onclick="location.href='#contact'"><img src="img/header-mail.png" alt="お問い合わせ">お問い合わせ</button>

aタグを使った修正方法

buttonタグをdivタグに置き換えるだけで問題なくなります。

<div class="button">
  <a href="#contact"><img src="img/header-mail.png" alt="お問い合わせ">お問い合わせ</a>
</div>

まとめ

タイトルとURLをコピーしました