ホームページ > 記事 > ウェブフロントエンド > 私の :active 擬似クラスが Mobile Safari で動作しないのはなぜですか? どうすれば修正できますか?
私の :active 擬似クラスが Mobile Safari で動作しないのはなぜですか? どうすれば修正できますか?
- DDDオリジナル
- 2024-11-27 22:52:09164ブラウズ
:Mobile Safari の:active 疑似クラス: トラブルシューティング ガイド
CSS の領域では、:active 疑似クラスは一般的にユーザーが要素をアクティブ化するときに要素の外観を変更するために使用されます。ただし、Mobile Safari (iOS デバイス) で タグを処理する場合、この機能に問題が発生する可能性があります。タップ操作で :active スタイルをトリガーできません。
問題の理解
Mobile Safari では、タッチスクリーンでのユーザーのタップを登録する前に遅延メカニズムが採用されています。この遅延は、不注意なタップによってアクションがトリガーされるのを防ぐことを目的としています。その結果、タップ イベントがすぐにキャプチャされないため、:active スタイルは決して適用されません。
解決策: 遅延の回避
この問題を解決するには、
の ontouchstart 属性要素。この属性を追加することで、タッチ イベントを監視する必要があることを示します。<body ontouchstart="">
...
</body>
この変更により、Mobile Safari は即座にタッチ イベントを登録し、意図したとおり :active スタイルをトリガーします。
あるいは、開発者は、さまざまなデバイスでのタッチ イベントの応答性を強化するために特別に設計された JavaScript ライブラリである「Fastclick」を利用できます。このライブラリを組み込むことで、:active 疑似クラスもシームレスに機能します。
以上が私の :active 擬似クラスが Mobile Safari で動作しないのはなぜですか? どうすれば修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。