iPhoneでCSS疑似要素が効かない解決法
スマホにはCSSの擬似要素:hoverの概念はないですが、ボタンなどをタップした時にスタイルが一瞬変わると思ってましたが、iPhoneには適用されないことを先日知りました。
Androidユーザーなので、いつもMacのSafariの「レスポンシブ・デザイン・モードにする」で検証していますが、Safariで反映してるのでできたと思いましたが、実機で確認するとダメでした。
調べると簡単でした。
<body ontouchstart=""> ... </body>
これで全部の要素が効くようになります。
特定の要素もに効かせたい場合はその要素のみ付ければ大丈夫です。
ちなみにスマホで擬似要素の動作は
:hover → タップしたら適用される、別のところをタップしたら解除される
:active → タップしたら一瞬適用される
:focus → 適用されないようです
UI/UXは細かいところまでこだわるほど、ユーザーの使いやすさに繋がるので、今後もセンスを磨いていきたいと思います(^o^)/
