ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS メディア クエリを使用して非タッチスクリーン デバイスを検出するにはどうすればよいですか?
CSS メディア クエリは、さまざまなデバイスの特性に基づいて Web サイトのスタイルを調整する便利な方法を提供します。デバイスがタッチスクリーンであるかどうかの判断はメディア クエリでは直接サポートされていませんが、この問題に対処する新たなメディア機能があります。
CSS4 メディア クエリ ドラフトでは、 「ポインタ」メディア機能。デバイス上のポインティング デバイスの存在と精度を照会します。この機能は次の値を取ります:
「ポインター」メディア機能は、非タッチスクリーン デバイスを対象とするために次のように使用できます。
@media (pointer:coarse) { /* CSS styles for non-touchscreen devices */ }
「ポインター」メディア機能は現在、一部のブラウザでサポートされています。ブラウザに対応していますが、互換性は異なります。ブラウザーの互換性に関する最新情報については、Quirksmode を参照してください。
「ポインター」メディア機能を使用してデバイス固有のスタイルを実現できない場合は、JavaScript ソリューションの使用を検討してください。一般的なアプローチは次のとおりです。
「ポインター」メディア機能は、CSS メディア クエリで非タッチスクリーン デバイスを検出する便利な方法を提供します。ただし、まだ開発中のため、ブラウザのサポートは限られています。代替の JavaScript ベースのソリューションについては、!window.Touch または Modernizr を検討してください。
以上がCSS メディア クエリを使用して非タッチスクリーン デバイスを検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。