Medienabfrage zum Erkennen, ob das Gerät ein Touchscreen ist

Was ist der sicherste Weg, Medienanfragen zu nutzen, wenn etwas nicht auf einem Touchscreen-Gerät passiert? Wenn es keinen Weg gibt, schlagen Sie vor, eine JavaScript-Lösung wie !window.Touch oder Modernizr zu verwenden?

    Ich würde vorschlagen, modernisieren und seine Media-Abfrage-functionen verwenden.

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

    Mit CSS gibt es jedoch Pseudo-classn wie zB in Firefox. Sie können verwenden : -moz-system-metric (touch-enabled) . Diese functionen sind jedoch nicht für jeden Browser verfügbar.

    Für Apple- Geräte können Sie einfach verwenden:

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

    Speziell für Ipad:

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

    Aber diese funktionieren nicht unter Android .

    Modernizr bietet Feature-Erkennungsfunktionen, und das Erkennen von Features ist eine gute Möglichkeit zum Codieren, anstatt auf Basis von Browsern zu codieren.

    Styling-Touch-Elemente

    Modernisierer fügt dem HTML-Tag für genau diesen Zweck classn hinzu. In diesem Fall touch und no-touch Sie no-touch damit Sie Ihre Touch-Aspekte formatieren können, indem Sie Ihren Wählern die Option .touch voranstellen. zB .touch .your-container . Credits: Ben Swinburne

    Es gibt tatsächlich eine Eigenschaft in dem CSS4-Medienabfrageentwurf .

    Die Medienfunktion “pointers” 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 das UA die Merkmale des am wenigsten fähigen Zeigegeräts der primären Eingabemechanismen meldet. Diese Medienabfrage hat folgende Werte:

    ‘keiner’
    – 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 dazu gefunden.

    Browserkompatibilität kann im Quirksmode getestet werden . Das sind meine Ergebnisse (22. Januar 2013):

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

    Die CSS-Lösungen scheinen ab Mitte 2013 nicht flächendeckend verfügbar zu sein. Stattdessen…

    1. Nick Zakas erklärt, dass Modernizr eine CSS-class no-touch anwendet, wenn der Browser keine Berührung unterstützt.

    2. Oder entdecken 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:

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

    Medientypen ermöglichen es Ihnen nicht, Berührungsfunktionen als Teil des Standards zu erkennen:

    http://www.w3.org/TR/css3-mediaqueries/

    Also, es gibt keine Möglichkeit, es konsistent über CSS oder Medienabfragen zu tun, müssen Sie auf JavaScript zurückgreifen.

    Keine Notwendigkeit, Modernizr zu verwenden, Sie können einfach nur JavaScript verwenden:

      

    Im Jahr 2017 funktioniert CSS-Medienabfrage von der zweiten Antwort immer noch nicht in Firefox. Ich habe dafür eine Lösung gefunden: -moz-touch-enabled


    Also, hier ist Cross-Browser-Media-Abfrage:

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

    Es gibt tatsächlich eine Medienabfrage dafür:

     @media (hover: none) { … } 

    Abgesehen von Firefox wird es ziemlich gut unterstützt . Da Safari und Chrome auf Mobilgeräten die gängigsten Browser sind, kann es bis zu einer größeren Akzeptanz ausreichen.

    Diese Lösung wird funktionieren, bis CSS4 von allen Browsern global unterstützt wird. Wenn dieser Tag kommt, benutze einfach CSS4. Aber bis dahin funktioniert das 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()) }; 

    aufladen:

    Alter Weg:

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

    neuerer Weg:

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

    Der obige Code fügt dem body-Tag die “is-touch” -class hinzu, wenn das Gerät über einen Touchscreen verfügt. Jetzt einen beliebigen Ort in Ihrer Webanwendung, wo Sie css haben würden: Hover Sie können body:not(.is-touch) the_rest_of_my_css:hover aufrufen body:not(.is-touch) the_rest_of_my_css:hover

    beispielsweise:

     button:hover 

    wird:

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

    Diese Lösung vermeidet den Einsatz von Modernisierer, da der Modernisierer lib eine sehr große Bibliothek ist. Wenn Sie nur Touchscreens erkennen möchten, ist dies am besten, wenn die Größe der endgültigen kompilierten Quelle eine Voraussetzung ist.

    Hinzufügen eines classn-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'); }