Wie kann ich Touchscreens mithilfe von CSS und JavaScript erkennen?

Touchscreens mit Medienabfragen erkennen

Im Bereich responsive Webdesign ist es wichtig, Inhalte an verschiedene Eingabegeräte anzupassen. Die Feststellung, ob es sich bei einem Gerät um einen Touchscreen handelt, kann durch entsprechende Anpassungen das Benutzererlebnis verbessern.

Medienabfragelösung

Der CSS4-Medienabfrageentwurf bietet eine Funktion speziell für diesen Zweck: 'Zeiger'. Es bietet drei Werte:

• keine:Kein Zeigegerät
• grob:Zeigegerät mit geringer Genauigkeit
• Gut: Genaues Zeigen Gerät

Verwendung:

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

Kompatibilität:

Stand: 22. Januar 2013, Browserkompatibilität lautet wie folgt:

• Chrome/Win: Unterstützt
• Chrome/iOS: Nicht unterstützt
• Safari/iOS6: Nicht unterstützt

JavaScript-Alternativen:

While Die „Zeiger“-Medienabfrage ist in der Browserunterstützung eingeschränkt, bieten JavaScript-Lösungen Alternativen:

• !window.Touch: Erkennt Berührungseingaben
• Modernizr: Eine Bibliothek, die eine breite Palette von Gerätefunktionen bietet, inklusive Touchscreen Erkennung

Fazit:

Die Verwendung der „Zeiger“-Medienabfrage, sofern verfügbar, ist die präziseste Methode zur Erkennung von Touchscreens. Für Geräte ohne Unterstützung können jedoch JavaScript-Lösungen wie !window.Touch effektiv eingesetzt werden.

Das obige ist der detaillierte Inhalt vonWie kann ich Touchscreens mithilfe von CSS und JavaScript erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!