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.Touch
lub Modernizr?
css
touch
media-queries
JJJollyjim
źródło
źródło
Odpowiedzi:
Sugerowałbym użycie modernizr i jego funkcji media query.
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ć:
Specjalnie dla iPada:
Ale te nie działają na Androidzie .
Stylizacja elementów dotykowych
Modernizer dodaje klasy do znacznika HTML właśnie w tym celu. W tym przypadku,
touch
ano-touch
więc można projektować swoje dotykowe Aspektów poprzedzając swoje selektorów z .touch. np.touch .your-container
. Kredyty: Ben Swinburneźródło
modernizr
będzie idealnie :)Modernizr.touch
Testu wskazuje jedynie, czy przeglądarka obsługuje dotknąć wydarzenia, które niekoniecznie odzwierciedlają urządzenie z ekranem dotykowym. Na przykład telefony Palm Pre / WebOS (dotykowe) nie obsługują zdarzeń dotykowych i dlatego nie przejdą tego testu.touch
ano-touch
więc można projektować twój dotyk Aspektów poprzedzając swoje selektorów z.touch
. Np..touch .your-container
Właściwie jest do tego właściwość w wersji roboczej zapytania o media CSS4 .
Byłoby to używane jako takie:
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):
źródło
Wydaje się, że rozwiązania CSS nie są szeroko dostępne od połowy 2013 roku. Zamiast...
Nicholas Zakas wyjaśnia, że Modernizr stosuje
no-touch
klasę CSS, gdy przeglądarka nie obsługuje dotyku.Lub wykryj w JavaScript za pomocą prostego fragmentu kodu, co pozwoli Ci zaimplementować własne rozwiązanie podobne do Modernizr:
Następnie możesz napisać swój CSS jako:
źródło
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:
źródło
window.touch
&&window.TouchEvent
działa tylko na urządzeniach Apple.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:
źródło
-moz-touch-enabled
nie będzie to wkrótce potrzebne-moz-touch-enabled
podobno nie jest obsługiwany w przeglądarce Firefox 58+. Podobnie jak w przypadku, to rozwiązanie nie obejmuje przeglądarki Firefox 58-63 (ponieważ Firefox 64+ obsługuje zapytanie wskaźnikowe). Źródło: developer.mozilla.org/en-US/docs/Web/CSS/@media/…W rzeczywistości istnieje zapytanie o media na to:
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.
źródło
To zadziała. Jeśli nie, daj mi znać
edycja: kursor na żądanie nie jest już obsługiwany
źródło
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
onload:
stara droga:
nowszy sposób:
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: hover
body:not(.is-touch) the_rest_of_my_css:hover
na przykład:
staje się:
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.
źródło
dodanie klasycznego ekranu dotykowego do ciała za pomocą JS lub jQuery
źródło
Udało mi się rozwiązać ten problem za pomocą tego
źródło
on-demand
został usunięty ze specyfikacji oraz z przeglądarkami: github.com/w3c/csswg-drafts/commit/...