Wie können wir Touch-Only-Geräte in Webanwendungen genau bestimmen?

Bestimmen der Geräteeingabefunktionen für Nur-Touch-Schnittstellen

Die Erkennung, ob ein Benutzer ein Nur-Touch-Gerät verwendet, ist entscheidend für die Anpassung des Benutzers Schnittstelle von Webanwendungen entsprechend anpassen. Die aktuellen Antworten auf diese Frage bieten Methoden, um dies mithilfe von Touch-Event-Funktionen zu erreichen. Dieser Ansatz reicht jedoch nicht aus, da er nicht zwischen Geräten unterscheiden kann, die sowohl über Maus- als auch Touch-Eingabefunktionen verfügen.

Eine genauere Lösung ist die Verwendung von CSS4-Medieninteraktionsfunktionen. Mit diesen Funktionen können Entwickler das Vorhandensein und die Genauigkeit von Zeigegeräten wie Mäusen oder Touchscreens abfragen. Folgende Optionen stehen zur Verfügung:

<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>

Durch die Einbindung dieser Medienabfragen in JavaScript wird es möglich, die Eingabemöglichkeiten des Benutzers zu bestimmen:

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

Zusätzlich, Es ist wichtig zu bedenken, dass das Fehlen einer Mauseingabe auch auf das Vorhandensein eines reinen Tastaturgeräts hinweisen kann. CSS4-Medieninteraktionsfunktionen können beide Arten von Eingabebeschränkungen effektiv erkennen.

Das obige ist der detaillierte Inhalt vonWie können wir Touch-Only-Geräte in Webanwendungen genau bestimmen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!