CSS と JavaScript を使用してタッチスクリーンを検出するにはどうすればよいですか?

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

レスポンシブ Web デザインの領域では、コンテンツをさまざまな入力デバイスに適応させることが不可欠です。デバイスがタッチスクリーンであるかどうかを判断するには、適切な調整を行うことでユーザー エクスペリエンスを向上させることができます。

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

CSS4 メディア クエリ ドラフトは、この目的に特化した機能を提供します。 「ポインタ」。 3 つの値があります:

• none: ポインティング デバイスなし
• coarse: 低精度ポインティング デバイス
• 細かい: 正確なポインティングデバイス

使用法:

@media (pointer:coarse) {
    /* Adjust styles for low-accuracy pointing devices */
}

互換性:

2013 年 1 月 22 日現在、ブラウザーの互換性のようなものです

• Chrome/Win: サポートされています
• Chrome/iOS: サポートされていません
• Safari/iOS6: サポートされていません

JavaScript の代替:

「ポインター」メディア クエリはブラウザのサポートに制限があり、JavaScript ソリューションは代替手段を提供します:

• !window.Touch: タッチ入力を検出します
• Modernizr:タッチスクリーンを含む幅広いデバイス機能を提供するライブラリ検出

結論:

利用可能な場合は「ポインター」メディア クエリを使用することが、タッチスクリーンを検出する最も正確な方法です。ただし、サポートされていないデバイスの場合は、!window.Touch などの JavaScript ソリューションを効果的に使用できます。

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