Wie kann ich Geräte ohne Touchscreen mithilfe von Medienabfragen oder JavaScript zuverlässig erkennen?

Identifizieren von Geräten ohne Touchscreen mit Medienabfragen

Einführung:

Es ist entscheidend, festzustellen, ob ein Gerät Touchscreen-fähig ist zur Verbesserung der Benutzererfahrung in der Webentwicklung. Medienabfragen bieten eine bequeme Möglichkeit, Inhalte und Funktionen basierend auf den Gerätefunktionen anzupassen. Dieser Artikel befasst sich mit der sichersten Medienabfragetechnik zur Erkennung von Geräten ohne Touchscreen und untersucht alternative Lösungen.

Medienabfragelösung:

Der CSS4-Medienabfrageentwurf stellt das Innovative vor „Zeiger“-Funktion, um die Verfügbarkeit und Präzision eines Zeigegeräts wie einer Maus abzufragen. Es bietet drei mögliche Werte:

• keine: Zeigt das Fehlen eines Zeigegeräts an.
• grob: Stellt ein Gerät mit einem dar Zeigegerät mit begrenzter Genauigkeit.
• fein: Bezeichnet ein genaues Zeigegerät.

Mit dieser Funktion können Sie eine Medienabfrage wie folgt implementieren:

@media (pointer:coarse) {
    /* Code to adjust interface for coarse pointing devices */
}

Browserkompatibilität:

Wie Januar 2013 wurde die „Zeiger“-Medienabfrage in Chrome unter Windows unterstützt, jedoch nicht unter iOS oder Safari unter iOS 6.

Alternative Lösung: JavaScript

Wenn Medienabfragen nicht unterstützt werden, können Sie JavaScript-Lösungen wie die folgenden in Betracht ziehen:

if (!window.Touch) {
    // Code to handle non-touchscreen scenarios
}

Fazit:

Die „Zeiger“-Medienabfrage in CSS4 bietet eine robuste Möglichkeit, Nicht-Touchscreens zu erkennen Geräte. Allerdings sollte die Browserkompatibilität berücksichtigt werden. Alternativ können JavaScript-Lösungen wie „!window.Touch“ eingesetzt werden, um das gleiche Ergebnis zu erzielen.

Das obige ist der detaillierte Inhalt vonWie kann ich Geräte ohne Touchscreen mithilfe von Medienabfragen oder JavaScript zuverlässig erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!