Medienabfrage, um festzustellen, ob das Gerät ein Touchscreen ist

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.Touchoder Modernizr vor?

Ich würde vorschlagen, modernizr und seine Medienabfragefunktionen zu verwenden.

if (Modernizr.touch){
   // bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
   // bind to normal click, mousemove, etc
}

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:

if(window.TouchEvent) {
   //.....
}

Speziell für Ipad:

if(window.Touch) {
    //....
}

Diese funktionieren jedoch nicht unter Android .

Modernizr bietet Funktionen zur Funktionserkennung, und die Erkennung von Funktionen ist eine gute Möglichkeit zum Codieren, anstatt auf der Basis von Browsern zu codieren.

Styling von Touch-Elementen

Modernizer fügt dem HTML-Tag genau zu diesem Zweck Klassen hinzu. In diesem Fall touchund no-touchso können Sie Ihre Touch bezogene Aspekte Stil durch Ihre Wähler mit .touch prefixing. zB .touch .your-container. ^{Credits: Ben Swinburne}

Es gibt tatsächlich eine Eigenschaft dafür im CSS4-Medienabfrageentwurf .

Die Medienfunktion "Zeiger" wird verwendet, um das Vorhandensein und die Genauigkeit eines Zeigegeräts wie einer Maus abzufragen. Wenn ein Gerät über mehrere Eingabemechanismen verfügt, wird empfohlen, dass die UA die Eigenschaften des am wenigsten leistungsfähigen Zeigegeräts der primären Eingabemechanismen meldet. Diese Medienabfrage nimmt die folgenden Werte an:

'none'
- Der Eingabemechanismus des Geräts enthält kein Zeigegerät.

'grob'
- Der Eingabemechanismus des Geräts enthält ein Zeigegerät mit begrenzter Genauigkeit.

'fein'
- Der Eingabemechanismus des Geräts enthält ein genaues Zeigegerät.

Dies würde als solches verwendet werden:

/* Make radio buttons and check boxes larger if we have an inaccurate pointing device */
@media (pointer:coarse) {
    input[type="checkbox"], input[type="radio"] {
        min-width:30px;
        min-height:40px;
        background:transparent;
    }
}

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):

• Chrome / Win: Funktioniert
• Chrome / iOS: Funktioniert nicht
• Safari / iOS6: Funktioniert nicht

Die CSS-Lösungen scheinen ab Mitte 2013 nicht weit verbreitet zu sein. Stattdessen...

1. Nicholas Zakas erklärt, dass Modernizr eine no-touchCSS-Klasse anwendet, wenn der Browser Touch nicht unterstützt.

2. Oder erkennen Sie in JavaScript mit einem einfachen Code, mit dem Sie Ihre eigene Modernizr-ähnliche Lösung implementieren können:

   <script>
       document.documentElement.className += 
       (("ontouchstart" in document.documentElement) ? ' touch' : ' no-touch');
   </script>

   Dann können Sie Ihr CSS schreiben als:

   .no-touch .myClass {
       ...
   }
   .touch .myClass {
       ...
   }

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:

<script type="text/javascript">
    var is_touch_device = 'ontouchstart' in document.documentElement;
    if(is_touch_device) alert("touch is enabled!");
</script>

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:

@media (-moz-touch-enabled: 1), (pointer:coarse) {
    .something {
        its: working;
    }
}

Dafür gibt es tatsächlich eine Medienabfrage:

@media (hover: none) { … }

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.

Das wird funktionieren. Wenn es mich nicht wissen lässt

@media (hover: none) and (pointer: coarse) {
    /* Touch screen device style goes here */
}

edit: hover on-demand wird nicht mehr unterstützt

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

export const isMobile = {
  android: () => navigator.userAgent.match(/Android/i),
  blackberry: () => navigator.userAgent.match(/BlackBerry/i),
  ios: () => navigator.userAgent.match(/iPhone|iPad|iPod/i),
  opera: () => navigator.userAgent.match(/Opera Mini/i),
  windows: () => navigator.userAgent.match(/IEMobile/i),
  any: () => (isMobile.android() || isMobile.blackberry() || 
  isMobile.ios() || isMobile.opera() || isMobile.windows())
};

Onload:

Alter Weg:

isMobile.any() ? document.getElementsByTagName("body")[0].className += 'is-touch' : null;

neuerer Weg:

isMobile.any() ? document.body.classList.add('is-touch') : null;

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 aufrufenbody:not(.is-touch) the_rest_of_my_css:hover

beispielsweise:

button:hover

wird:

body:not(.is-touch) button:hover

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.

Hinzufügen eines Klassen-Touchscreens zum Körper mit JS oder jQuery

  //allowing mobile only css
    var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/));
    if(isMobile){
        jQuery("body").attr("class",'touchscreen');
    }

Ich konnte dieses Problem damit beheben

@media (hover:none), (hover:on-demand) { 
Your class or ID{
attributes
}    
}