タッチデバイスかどうか確認できますか？

開発
1

… JavaScriptで？

そして、モバイルではなく、タブレットのようなタッチデバイスなど、ホバーが意味をなさないあらゆるデバイスを意味します。

それともCSSを使わざるを得ないのですか？

「いいね！」 1
2

考慮すべき難しい点として、タッチスクリーン搭載のラップトップがあります。その場合、デバイスには技術的にはタッチスクリーンが搭載されているにもかかわらず、主な操作はマウス経由で行われる傾向があります。最近、それが原因でいくつか頭痛の種[:sweat_smile:]が発生しています。

しかし、具体的な質問にお答えすると、CSSメディアクエリが最善の方法だと思います。hover、pointer、any-hover、any-pointerがあります。

そして、それらのCSSメディアクエリは、window.matchMediaを使用してJSから次のように実行できます。

「いいね！」 4
3

ええ、良い点ですね。そして、良い提案です。

画像の上に通常はホバー時にのみ表示される抜粋をいつ表示するかを決定するために、テーマ設定を使用しようとしていました。

私の場合は、次のオプションがあります。

  • 常にオン
  • タッチデバイスでのみ（タブレット/スマートフォンではホバーはあまり利用できないため）
  • ホバー時のみ（通常の場合）

この場合、タッチデバイスを認識しないことは大惨事ではないかもしれません :sweat_smile:

単に直接的なサイト属性を見逃していただけではないかと期待していましたが、あなたの提案を検討します。ただし、concatClasses を使用したミニ CSS リファクタリングが必要になりそうです…

「いいね！」 1
4

capabilities サービスには、役立つ可能性のあるプロパティがいくつかあります。例：

ただし、注意点として、このロジックが最近私たちを悩ませた原因でした。近い将来、css-media-queryベースの戦略に置き換えることになると思います。（これが書かれた時点では、これらのメディアクエリは広く利用可能ではなかったと思います）

「いいね！」 6
5

おお、それは隠れたサービスですね…ソースであまり見かけません！:male_detective:

「いいね！」 1