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

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

はじめに:

デバイスがタッチスクリーン対応かどうかを判断することは重要ですWeb開発におけるユーザーエクスペリエンスを向上させるために。メディア クエリは、デバイスの機能に基づいてコンテンツと機能を適応させる便利な方法を提供します。この記事では、非タッチスクリーン デバイスを検出するための最も安全なメディア クエリ手法を詳しく掘り下げ、代替ソリューションを検討します。

メディア クエリ ソリューション:

CSS4 メディア クエリ ドラフトでは、革新的な機能が導入されています。マウスなどのポインティング デバイスの可用性と精度を問い合わせる「ポインター」機能。可能な値は次の 3 つです。

• none: ポインティング デバイスがないことを示します。
• coarse:精度が限られたポインティング デバイス。
• 細かい:正確なポインティング デバイスを示します。

この機能を使用すると、次のようなメディア クエリを実装できます。

@media (pointer:coarse) {
    /* Code to adjust interface for coarse pointing devices */
}

ブラウザの互換性:

2013 年 1 月の時点で、「ポインター」メディア クエリは Windows 上の Chrome ではサポートされていましたが、iOS やiOS 6 の Safari。

代替ソリューション: JavaScript

メディア クエリがサポートされていない場合は、次のような JavaScript ソリューションを検討できます:

if (!window.Touch) {
    // Code to handle non-touchscreen scenarios
}

結論:

CSS4 の「ポインター」メディア クエリは、非タッチスクリーン デバイスを検出するための堅牢な方法を提供します。ただし、ブラウザの互換性を考慮する必要があります。代わりに、「!window.Touch」などの JavaScript ソリューションを使用して、同じ結果を得ることができます。

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