Zapytanie o media w celu wykrycia, czy urządzenie jest ekranem dotykowym

Jaki jest najbezpieczniejszy sposób za pomocą zapytań o media, aby coś się wydarzyło, gdy nie korzystasz z urządzenia z ekranem dotykowym? Jeśli nie ma sposobu, czy sugerujesz użycie rozwiązania JavaScript, takiego jak !window.Touchlub Modernizr?

Sugerowałbym użycie modernizr i jego funkcji media query.

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

Jednak używając CSS, istnieją pseudoklasy, takie jak na przykład w Firefoksie. Możesz użyć : -moz-system-metric (z obsługą dotykową) . Ale te funkcje nie są dostępne dla każdej przeglądarki.

W przypadku urządzeń Apple możesz w prosty sposób użyć:

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

Specjalnie dla iPada:

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

Ale te nie działają na Androidzie .

Modernizr daje możliwości wykrywania funkcji, a wykrywanie funkcji to dobry sposób na kodowanie, a nie na kodowanie w oparciu o przeglądarki.

Stylizacja elementów dotykowych

Modernizer dodaje klasy do znacznika HTML właśnie w tym celu. W tym przypadku, toucha no-touchwięc można projektować swoje dotykowe Aspektów poprzedzając swoje selektorów z .touch. np .touch .your-container. ^{Kredyty: Ben Swinburne}

Właściwie jest do tego właściwość w wersji roboczej zapytania o media CSS4 .

Funkcja multimediów „wskaźnik” służy do sprawdzania obecności i dokładności urządzenia wskazującego, takiego jak mysz. Jeśli urządzenie ma wiele mechanizmów wejściowych, zaleca się, aby UA zgłaszał charakterystyki najmniej wydajnego urządzenia wskazującego z głównych mechanizmów wejściowych. To zapytanie o media przyjmuje następujące wartości:

„brak”
- mechanizm wprowadzania danych urządzenia nie obejmuje urządzenia wskazującego.

„zgrubny”
- mechanizm wprowadzania urządzenia obejmuje urządzenie wskazujące o ograniczonej dokładności.

„dobrze”
- mechanizm wprowadzania urządzenia obejmuje dokładne urządzenie wskazujące.

Byłoby to 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 też bilet w projekcie Chromium z tym związany.

Zgodność z przeglądarkami można przetestować w Quirksmode . Oto moje wyniki (22 stycznia 2013):

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

Wydaje się, że rozwiązania CSS nie są szeroko dostępne od połowy 2013 roku. Zamiast...

1. Nicholas Zakas wyjaśnia, że Modernizr stosuje no-touchklasę CSS, gdy przeglądarka nie obsługuje dotyku.

2. Lub wykryj w JavaScript za pomocą prostego fragmentu kodu, co pozwoli Ci zaimplementować własne rozwiązanie podobne do Modernizr:

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

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

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

Typy nośników nie pozwalają na wykrycie funkcji dotykowych w ramach standardu:

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

Dlatego nie ma sposobu, aby zrobić to konsekwentnie za pomocą CSS lub zapytań o media, będziesz musiał uciekać się do JavaScript.

Nie ma potrzeby korzystania z Modernizr, możesz 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 o media CSS z drugiej odpowiedzi nadal nie działa w przeglądarce Firefox. Znalazłem na to rozwiązanie: -moz-touch-enabled

Oto zapytanie o media w różnych przeglądarkach:

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

W rzeczywistości istnieje zapytanie o media na to:

@media (hover: none) { … }

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

To zadziała. Jeśli nie, daj mi znać

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

edycja: kursor na żądanie nie jest już obsługiwany

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

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:

stara droga:

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 tagu body, jeśli urządzenie ma ekran dotykowy. Teraz możesz zadzwonić w dowolną lokalizację w swojej aplikacji internetowej, w której miałbyś css dla: hoverbody:not(.is-touch) the_rest_of_my_css:hover

na przykład:

button:hover

staje się:

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

To rozwiązanie pozwala uniknąć używania programu modernizer, ponieważ biblioteka modernizer jest bardzo dużą biblioteką. Jeśli wszystko, co próbujesz zrobić, to wykryć ekrany dotykowe, Najlepiej będzie, gdy wymagany jest rozmiar ostatecznie skompilowanego źródła.

dodanie klasycznego ekranu dotykowego 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');
    }

Udało mi się rozwiązać ten problem za pomocą tego

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