Was ist der sicherste Weg, mit Medienabfragen etwas zu bewirken, wenn Sie sich nicht auf einem Touchscreen-Gerät befinden? Wenn dies nicht möglich ist, schlagen Sie die Verwendung einer JavaScript-Lösung wie !window.Touch
oder Modernizr vor?
css
touch
media-queries
JJJollyjim
quelle
quelle
Antworten:
Ich würde vorschlagen, modernizr und seine Medienabfragefunktionen zu verwenden.
Bei Verwendung von CSS gibt es jedoch Pseudoklassen wie beispielsweise in Firefox. Sie können Folgendes verwenden : -moz-system-metric (touch-enabled) . Diese Funktionen sind jedoch nicht für jeden Browser verfügbar.
Für Apple- Geräte können Sie einfach Folgendes verwenden:
Speziell für Ipad:
Diese funktionieren jedoch nicht unter Android .
Styling von Touch-Elementen
Modernizer fügt dem HTML-Tag genau zu diesem Zweck Klassen hinzu. In diesem Fall
touch
undno-touch
so können Sie Ihre Touch bezogene Aspekte Stil durch Ihre Wähler mit .touch prefixing. zB.touch .your-container
. Credits: Ben Swinburnequelle
modernizr
wird es perfekt sein :)Modernizr.touch
Test zeigt nur an, ob der Browser Berührungsereignisse unterstützt, die nicht unbedingt ein Touchscreen-Gerät widerspiegeln. Beispielsweise unterstützen Palm Pre / WebOS-Telefone (Touch-Telefone) keine Touch-Ereignisse und bestehen diesen Test daher nicht.touch
undno-touch
so können Sie Ihre Touch Aspekte Stil können im Zusammenhang mit Ihren Wählern mit prefixing.touch
. ZB.touch .your-container
Es gibt tatsächlich eine Eigenschaft dafür im CSS4-Medienabfrageentwurf .
Dies würde als solches verwendet werden:
Ich habe auch ein Ticket im Chromium-Projekt gefunden, das damit zusammenhängt.
Die Browserkompatibilität kann im Quirksmode getestet werden . Dies sind meine Ergebnisse (22. Januar 2013):
quelle
Die CSS-Lösungen scheinen ab Mitte 2013 nicht weit verbreitet zu sein. Stattdessen...
Nicholas Zakas erklärt, dass Modernizr eine
no-touch
CSS-Klasse anwendet, wenn der Browser Touch nicht unterstützt.Oder erkennen Sie in JavaScript mit einem einfachen Code, mit dem Sie Ihre eigene Modernizr-ähnliche Lösung implementieren können:
Dann können Sie Ihr CSS schreiben als:
quelle
Bei Medientypen können Sie Touch-Funktionen nicht als Teil des Standards erkennen:
http://www.w3.org/TR/css3-mediaqueries/
Es gibt also keine Möglichkeit, dies konsistent über CSS oder Medienabfragen zu tun. Sie müssen auf JavaScript zurückgreifen.
Sie müssen Modernizr nicht verwenden, sondern können einfach nur JavaScript verwenden:
quelle
window.touch
&&window.TouchEvent
funktioniert nur für Apple-Geräte.Im Jahr 2017 funktioniert die CSS-Medienabfrage aus der zweiten Antwort in Firefox immer noch nicht. Ich habe eine Lösung dafür gefunden: -moz-touch-enabled
Hier ist also eine browserübergreifende Medienabfrage:
quelle
-moz-touch-enabled
wird also nicht bald benötigt-moz-touch-enabled
wird in Firefox 58+ angeblich nicht unterstützt. Wie in deckt diese Lösung Firefox 58-63 nicht ab (da Firefox 64+ die Zeigerabfrage unterstützt). Quelle: developer.mozilla.org/en-US/docs/Web/CSS/@media/…Dafür gibt es tatsächlich eine Medienabfrage:
Abgesehen von Firefox wird es ziemlich gut unterstützt . Safari und Chrome sind die am häufigsten verwendeten Browser auf Mobilgeräten und können bis zu einer größeren Akzeptanz ausreichen.
quelle
Das wird funktionieren. Wenn es mich nicht wissen lässt
edit: hover on-demand wird nicht mehr unterstützt
quelle
Diese Lösung funktioniert so lange, bis CSS4 von allen Browsern global unterstützt wird. Wenn dieser Tag kommt, verwenden Sie einfach CSS4. Bis dahin funktioniert dies jedoch für aktuelle Browser.
browser-util.js
Onload:
Alter Weg:
neuerer Weg:
Mit dem obigen Code wird die Klasse "is-touch" zum Body-Tag hinzugefügt, wenn das Gerät über einen Touchscreen verfügt. Jetzt können Sie an jedem Ort in Ihrer Webanwendung, für den Sie CSS haben würden, den Hover aufrufen
body:not(.is-touch) the_rest_of_my_css:hover
beispielsweise:
wird:
Diese Lösung vermeidet die Verwendung von Modernizer, da die Modernizer-Bibliothek eine sehr große Bibliothek ist. Wenn Sie nur versuchen, Touchscreens zu erkennen, ist dies am besten, wenn die Größe der endgültig kompilierten Quelle erforderlich ist.
quelle
Hinzufügen eines Klassen-Touchscreens zum Körper mit JS oder jQuery
quelle
Ich konnte dieses Problem damit beheben
quelle
on-demand
wurde aus der Spezifikation und aus den Browsern entfernt: github.com/w3c/csswg-drafts/commit/…