webentwicklung-frage-antwort-db.com.de

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

Was ist der sicherste Weg, um mithilfe von Medienabfragen etwas zu erreichen, wenn kein Touchscreen-Gerät verwendet wird? Wenn dies nicht möglich ist, schlagen Sie vor, eine JavaScript-Lösung wie !window.Touch oder Modernizr zu verwenden?

csstouchmedia-queries
105
JJJollyjim

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 der Verwendung von CSS gibt es jedoch Pseudoklassen, beispielsweise in Firefox. Sie können : -moz-system-metric (berührungsaktiviert) verwenden. Diese Funktionen stehen jedoch nicht für jeden Browser zur Verfügung. 

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

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

Speziell für ipad:

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

Aber diese funktionieren nicht auf Android.

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

Styling von Touch-Elementen

Modernizer fügt dem HTML-Tag zu diesem Zweck Klassen hinzu. In diesem Fall können Sie mit touch und no-touch Ihre berührungsbezogenen Aspekte gestalten, indem Sie ihren Selektoren .touch voranstellen. z.B. .touch .your-container. Credits: Ben Swinburne

37
Starx

Im CSS4-Medienabfrageentwurf gibt es tatsächlich eine Eigenschaft dafür.

Die Medienfunktion "Zeiger" wird verwendet, um nach der Anwesenheit zu fragen und Genauigkeit eines Zeigegeräts wie einer Maus. Wenn ein Gerät über .__ verfügt. Bei mehreren Eingabemechanismen wird empfohlen, dass der UA die .__ meldet. Eigenschaften des am wenigsten geeigneten Zeigegeräts des primären Eingabemechanismen. Diese Medienanfrage nimmt die folgenden Werte an:

'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 gefunden.

Die Browserkompatibilität kann unter Quirksmode getestet werden. Dies sind meine Ergebnisse (22. Januar 2013):

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

Die CSS-Lösungen scheinen ab Mitte 2013 nicht allgemein verfügbar zu sein. Stattdessen...

  1. Nicholas Zakas erklärt dass Modernizr eine no-touch-CSS-Klasse anwendet, wenn der Browser Berührung nicht unterstützt. 

  2. Oder entdecken 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 {
    ...
}
49
Simon East

Medientypen erlauben es nicht, Berührungsfunktionen als Teil des Standards zu erkennen:

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

Es gibt also keine Möglichkeit, konsistent über CSS oder Medienabfragen auszuführen. Sie müssen auf JavaScript zurückgreifen.

Sie brauchen kein Modernizr zu verwenden, Sie können nur einfaches JavaScript verwenden:

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

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

Hier ist also eine Cross-Browser-Medienabfrage:

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

Dafür gibt es eigentlich eine Medienabfrage: 

@media (hover: none) { … }

Abgesehen von Firefox wird ziemlich gut unterstützt . Da Safari und Chrome die am häufigsten verwendeten Browser auf mobilen Geräten sind, kann dies für eine größere Akzeptanz ausreichen.

8
Buzut

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

Der obige Code fügt dem body-Tag die Klasse "is-touch" hinzu, wenn das Gerät über einen Touchscreen verfügt. Jetzt einen beliebigen Ort in Ihrer Webanwendung, für den Sie css hätten: hover können Sie body:not(.is-touch) the_rest_of_my_css:hover aufrufen

zum Beispiel:

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ültigen kompilierten Quelle erforderlich ist. 

3
Patrick W. McMahon

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');
    }
0
Matoeil

Ich konnte dieses Problem damit lösen

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