Webサイトを制作してスマホで動作を確認すると、リンクを2回タップしないとリンク先に飛ばない時が結構あります。
あと、バナーなどにhoverをつけているのに、スマホの場合はそもそもタッチしてしまうのでhoverが効かないように見えるという現象もあります。
この問題はiOS特有の不具合のようで、昔からjavascriptなどで対策されているようです。
じつは、CSSだけで簡単になおります。
この記事ではスマホで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.hatenablog.com/entry/2018/08/19/080000
buttonタグのaタグの組み合わせが問題を起こすこともある
buttonタグとaタグを組み合わせた時にスマホで数回タップしないと反応しない現象がおきました。
まとめ
モバイルファーストと言われて久しいですが、実機で確認して動きがおかしかった時は絶望的な気分になります。PCでスマホエミュレーターで動きが再現すれば解析できるのですが、実機でしか起きない問題は解析するのも対策するのも大変です。
もし、今回の様な減少でお悩みであれば、今回の記事を思い出していただければ簡単に対策できると思います。
