Ermittlung von Geräteeingabefunktionen für nur Berühren-Schnittstellen

Erkennen, ob ein Benutzer ein Nur-Touch-Gerät verwendet, ist für die Anpassung der Benutzeroberfläche von Webanträgen entsprechend entscheidend. Die aktuellen Antworten auf diese Frage bieten Methoden, um dies mithilfe von Touch -Ereignisfunktionen zu erreichen. Dieser Ansatz ist jedoch nicht ausreichend, da er nicht zwischen Geräten mit Maus- und Eingangsfunktionen unterscheiden kann.

Eine genauere Lösung besteht darin, CSS4 -Medieninteraktionsfunktionen zu verwenden. Diese Funktionen ermöglichen es Entwicklern, das Vorhandensein und die Genauigkeit von Zeigungsgeräten wie Mäusen oder Touchscreens zu befragen. Die folgenden Optionen sind verfügbar:

@media (pointer: coarse) { ... } // Limited accuracy pointing device
@media (pointer: fine) { ... } // Accurate pointing device
@media (pointer: none) { ... } // No pointing device

@media (hover: hover) { ... } // Can hover
@media (hover: none) { ... } // Cannot hover

@media (any-hover: hover) { ... } // Any input device can hover
@media (any-hover: none) { ... } // No input device can hover

durch Integration dieser Medienfragen in JavaScript in den Eingangsfunktionen des Benutzers integriert werden:

if(window.matchMedia("(any-hover: none)").matches) {
    // Touch-only device
}

Zusätzlich ist es wichtig zu berücksichtigen, dass der Mangel an Mauseingabe auch das Vorhandensein eines Geräts nur für Tastaturen anzeigen kann. CSS4 -Medieninteraktionsfunktionen können beide Arten von Eingabestypen effektiv erkennen.