Wie kann ich Geräte ohne Touchscreen mithilfe von CSS-Medienabfragen erkennen?

Erkennen von Geräten ohne Touchscreen mit Medienabfragen

CSS-Medienabfragen bieten eine bequeme Möglichkeit, das Website-Design basierend auf verschiedenen Geräteeigenschaften anzupassen. Während die Bestimmung, ob es sich bei einem Gerät um einen Touchscreen handelt, nicht direkt von Medienabfragen unterstützt wird, gibt es eine neue Medienfunktion, die dieses Problem behebt.

CSS4-Medienfunktion „Zeiger“

Der CSS4-Medienabfrageentwurf führt die ein „Zeiger“-Medienfunktion, die das Vorhandensein und die Genauigkeit eines Zeigegeräts auf einem Gerät abfragt. Diese Funktion nimmt die folgenden Werte an:

• 'keine': Es ist kein Zeigegerät verfügbar.
• 'grob': A Es ist ein Zeigegerät mit begrenzter Genauigkeit verfügbar.
• 'fein': Ein äußerst genaues Zeigegerät ist verfügbar.

Verwenden der „Zeiger“-Medienfunktion

Die „Zeiger“-Medienfunktion kann wie folgt für Geräte ohne Touchscreen verwendet werden:

@media (pointer:coarse) {
    /* CSS styles for non-touchscreen devices */
}

Browserkompatibilität

Die Medienfunktion „Zeiger“ wird derzeit in einigen Browsern unterstützt, die Kompatibilität variiert jedoch. Aktuelle Informationen zur Browserkompatibilität finden Sie unter Quirksmode.

Alternative JavaScript-Lösung

Wenn mit der „Zeiger“-Medienfunktion kein gerätespezifisches Styling erreicht werden kann, sollten Sie die Verwendung einer JavaScript-Lösung in Betracht ziehen. Zu den gängigen Ansätzen gehören:

• !window.Touch: Erkennt das Fehlen eines Touchscreens.
• Modernizr: Bietet einen umfassenden Satz von Funktionserkennungstools, einschließlich Touchscreen-Erkennung.

Fazit

Die Die Medienfunktion „Zeiger“ bietet eine praktische Möglichkeit, Geräte ohne Touchscreen in CSS-Medienabfragen zu erkennen. Es befindet sich jedoch noch in der Entwicklung und bietet nur begrenzte Browserunterstützung. Erwägen Sie für alternative JavaScript-basierte Lösungen !window.Touch oder Modernizr.

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