Zapytanie o Media w celu wykrycia, czy urządzenie jest Ekranem dotykowym

Istnieje właściwość dla tego w css4 Media query draft .

Funkcja 'pointer' służy do zapytań o obecność i dokładność urządzenia wskazującego, takiego jak mysz. Jeśli urządzenie ma wielu mechanizmów wprowadzania, zaleca się, aby UA zgłaszał charakterystyka najmniej sprawnego urządzenia wskazującego głównego mechanizmy wejściowe. To Zapytanie o media przyjmuje następujące wartości:

'none'
- Wejście mechanizm urządzenia nie obejmuje urządzenia wskazującego.

'coarse"
- Mechanizm wejściowy urządzenia zawiera urządzenie wskazujące o ograniczonej dokładności.

'fine"
- Mechanizm wejściowy urządzenia zawiera dokładne urządzenie wskazujące.

To byłoby używane jako takie:

/* 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;
    }
}

Znalazłem również bilet w projekcie Chromium związanym z tym.

Kompatybilność przeglądarki można przetestować na Quirksmode . To są moje wyniki (22 sty 2013):

• Chrome / Win: Działa
• Chrome / iOS: nie działa
• Safari/iOS6: nie działa

Rozwiązania CSS nie wydają się być powszechnie dostępne od połowy 2013 roku. Zamiast tego...

1. Nick Zakas wyjaśnia , że Modernizr stosuje no-touch klasę CSS, gdy przeglądarka nie obsługuje touch.

2. Lub wykryć w JavaScript za pomocą prostego fragmentu kodu, pozwalającego zaimplementować własne rozwiązanie przypominające Modernizr:

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

   Następnie możesz zapisać swój CSS jako:

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

Typy nośników nie pozwalają na wykrywanie możliwości dotykowych w ramach standardu:

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

Tak więc, nie ma sposobu, aby to zrobić konsekwentnie {[9] } poprzez CSS lub media queries, będziesz musiał uciekać się do JavaScript.

Nie trzeba używać Modernizr, można po prostu użyć zwykłego JavaScript:

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

W 2017 roku zapytanie CSS media z drugiej odpowiedzi nadal nie działa na Firefoksie. Znalazłem do tego soluton: - moz-touch-enabled

Oto Zapytanie o media między przeglądarkami:

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

Istnieje właściwie Zapytanie o media:

@media (hover: none) { … }

Oprócz Firefoksa, jest to dość dobrze obsługiwane . Safari i Chrome są najczęstszymi przeglądarkami na urządzeniach mobilnych, może wystarczyć do większej adopcji.

To rozwiązanie będzie działać, dopóki CSS4 nie będzie obsługiwany globalnie przez wszystkie przeglądarki. Kiedy nadejdzie ten dzień, po prostu użyj CSS4. ale do tego czasu działa to dla obecnych przeglądarek.

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:

Old way:

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

Nowszy sposób:

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

Powyższy kod doda klasę" is-touch " do znacznika body, jeśli urządzenie ma ekran dotykowy. Teraz dowolne miejsce w aplikacji webowej, w którym miałbyś css dla: hover możesz wywołać body:not(.is-touch) the_rest_of_my_css:hover

Dla przykład:

button:hover

Staje się:

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

To rozwiązanie pozwala uniknąć użycia modernizer, ponieważ modernizer lib jest bardzo dużą biblioteką. Jeśli wszystko, co próbujesz zrobić, to wykryć ekrany dotykowe, będzie to najlepsze, gdy wymagany jest rozmiar końcowego skompilowanego źródła.

Dodawanie klasy touchscreen do ciała za pomocą JS lub jQuery

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