Web アプリケーションでタッチ専用デバイスを正確に判断するにはどうすればよいでしょうか?

タッチ専用インターフェイスのデバイス入力機能の決定

ユーザーがタッチ専用デバイスを使用しているかどうかの検出は、ユーザーを適応させるために重要ですそれに応じて Web アプリケーションのインターフェイスも変更されます。この質問に対する現在の回答では、タッチ イベント機能を使用してこれを実現する方法が提供されています。ただし、このアプローチは、マウス入力機能とタッチ入力機能の両方を備えたデバイスを区別できないため不十分です。

より正確な解決策は、CSS4 メディア インタラクション機能を利用することです。これらの機能を使用すると、開発者はマウスやタッチ スクリーンなどのポインティング デバイスの存在と精度を照会できます。次のオプションが利用可能です:

<code class="css">@media (pointer: coarse) { ... } // Limited accuracy pointing device
@media (pointer: fine) { ... } // Accurate pointing device
@media (pointer: none) { ... } // No pointing device</code>

<code class="css">@media (hover: hover) { ... } // Can hover
@media (hover: none) { ... } // Cannot hover</code>

<code class="css">@media (any-hover: hover) { ... } // Any input device can hover
@media (any-hover: none) { ... } // No input device can hover</code>

これらのメディア クエリを JavaScript に組み込むことにより、ユーザーの入力機能を判断することが可能になります:

<code class="js">if(window.matchMedia("(any-hover: none)").matches) {
    // Touch-only device
}</code>

さらに、マウス入力がない場合は、キーボードのみのデバイスが存在することを示している可能性があることを考慮することが重要です。 CSS4 メディア インタラクション機能は、両方のタイプの入力制限を効果的に検出できます。

以上がWeb アプリケーションでタッチ専用デバイスを正確に判断するにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。