CSS メディア クエリを使用して非タッチスクリーン デバイスを検出するにはどうすればよいですか?

メディア クエリによる非タッチスクリーン デバイスの検出

CSS メディア クエリは、さまざまなデバイスの特性に基づいて Web サイトのスタイルを調整する便利な方法を提供します。デバイスがタッチスクリーンであるかどうかの判断はメディア クエリでは直接サポートされていませんが、この問題に対処する新たなメディア機能があります。

CSS4 'ポインター' メディア機能

CSS4 メディア クエリ ドラフトでは、 「ポインタ」メディア機能。デバイス上のポインティング デバイスの存在と精度を照会します。この機能は次の値を取ります:

• 'none': ポインティング デバイスは使用できません。
• 'coarse': A精度が制限されたポインティング デバイスを使用できます。
• 'fine': A高精度のポインティング デバイスが利用可能です。

「ポインター」メディア機能の使用

「ポインター」メディア機能は、非タッチスクリーン デバイスを対象とするために次のように使用できます。

@media (pointer:coarse) {
    /* CSS styles for non-touchscreen devices */
}

ブラウザの互換性

「ポインター」メディア機能は現在、一部のブラウザでサポートされています。ブラウザに対応していますが、互換性は異なります。ブラウザーの互換性に関する最新情報については、Quirksmode を参照してください。

代替 JavaScript ソリューション

「ポインター」メディア機能を使用してデバイス固有のスタイルを実現できない場合は、JavaScript ソリューションの使用を検討してください。一般的なアプローチは次のとおりです。

• !window.Touch: タッチスクリーンの不在を検出します。
• Modernizr: 包括的なセットを提供します。タッチスクリーンを含む機能検出ツール

結論

「ポインター」メディア機能は、CSS メディア クエリで非タッチスクリーン デバイスを検出する便利な方法を提供します。ただし、まだ開発中のため、ブラウザのサポートは限られています。代替の JavaScript ベースのソリューションについては、!window.Touch または Modernizr を検討してください。

以上がCSS メディア クエリを使用して非タッチスクリーン デバイスを検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。