Jak wylaczac animacje i inne efekty specjalne w wersji mobilnej?

pytanie zadane 3 września 2017 w JavaScript przez xdmik23 Gaduła (3,000 p.)

Witam! Obecnie coraz wiecej jest stron responsywnych i oczywiscie samo dopasowanie sie strony do ekranu mozna uzyskac za pomoca css.Jednak zastanawiam sie co w przypadku animacji,chociazby biblioteki animate.css.W jaki sposob mozna wylaczyc takie efekty w wersji mobilnej?Z góry dziękuje za pomoc

komentarz 3 września 2017 przez xdmik23 Gaduła (3,000 p.)

Przegladajac internet natknalem sie na takie cos:http://detectmobilebrowsers.com/.WIe ktos moze jak tego mozna uzyc?

2 odpowiedzi

odpowiedź 4 września 2017 przez zgrybus Pasjonat (24,860 p.)

https://stackoverflow.com/questions/22680448/if-mobile-disable-certain-scripts

komentarz 4 września 2017 przez kamil29 Obywatel (1,230 p.)

czyli uzyc tego co ty wyslales i wkleic do to docelowego skrypttu?

komentarz 4 września 2017 przez zgrybus Pasjonat (24,860 p.)

na przykład :P

odpowiedź 4 września 2017 przez ShiroUmizake Nałogowiec (46,300 p.)

Jest na to parę sposobów, można spróbować nadpisać klasę odpowiadającą za animację (jeżeli tylko raz z niej korzystamy, choć możemy to pokombinować z przekazywaniem do własnej klasy CSS własności klasy z animateCSS), stosując important , ustawiając wszystko na 0. Ale to nie znaczy, że ona nie działa. Czyli zwykły media-queries.

Innym sposobem ugryzienia tego jest wyznaczenie jakie właściwości CSS mają być przepisane do danego urządzenia. Ale tu trzeba dość sporu kodu CSS napisać + co jeżeli urządzenie będzie w jakiś sposób niestandardowe.

Inny sposób to detekcja przez server (nie klienta) typu urządzenia. Ale od tego chyba się już odchodzi. Niech to się tu specjaliści PHP wypowiedzą.

Najlepszy to odpinanie klasy CSS, od elementu. Ale kiedy ją odpinać? Istnieje taki obiekt jak Navigator. No on ma dośc dużo pól. Ale nas interesuje jedynie userAgent.

https://developer.mozilla.org/en-US/docs/Web/API/Navigator

Ale ta jest nie zalecana. Z wielu powodów.

Na łatwiej jest po prostu mierzyć wielkość ekranu po przez pole window.outerWidth.

https://developer.mozilla.org/pl/docs/Web/API/Window/outerWidth

A dlaczego nie innerWidth? Gdyż zwracamy okno, a nas interesuje całość + na chromie żle odczytuje tą wartość przy emulacji okna. Więcej na ten temat tutaj:

https://stackoverflow.com/questions/12066093/what-is-the-difference-between-window-innerwidth-window-outerwidth

Wywołuje zdarzenie resize, na window sprawdza outerWidth czy jest poniżej jakieś wartości. I done.

A teraz do tego co ty używasz.

Jest to dość skomplikowany regex.

Drugi jest problem jest taki, że on ma na sztywno wpisaną jakąś tablicę i pewnie porównuje z UA, a co jeśli dojdzie jakaś nowa marka?

Ciekawym pomysłem jest sprawdzanie czy potrafi przeglądarka zainicjować zdarzenie touch, ale to też nie jest najlepsze rozwiązanie z powodu istnienia ultrabooków i chyba też istnieją ekrany dotykowe na deteskopy.

komentarz 4 września 2017 przez xdmik23 Gaduła (3,000 p.)

dzieki za tak rozbudowana odpowiedz,bede cos kombinowal

komentarz 4 września 2017 przez xdmik23 Gaduła (3,000 p.)

https://stackoverflow.com/questions/22680448/if-mobile-disable-certain-scripts

czy ten kod zadziala także na Windows Phone czy tam Windows Mobile?

komentarz 4 września 2017 przez ShiroUmizake Nałogowiec (46,300 p.)

A od kiedy kod JS-a ma znaczenie pod wzlędem systemu, liczy się na czym uruchomimy (mówimy oczywiście o czystym JS). Testuj i sprawdzaj co odpali na mobilnym IE :). A co do linku.

Pierwszy kod to zwykły if badający coś (MDN nic mi nie podpawiada o pole window.width).

A drugi to regex, która sprawdza czy w podanym ciągu znaków w naszym przypadku UA znajduje się jeden z podanych stringów. Metoda test zwraca true bądż false, zależnie od oczekiwanego wyniku.

Plus do tego append z jquery do wklejania węzła.

Coś ty się tak uczepił WP-ka? xd Daj mu umierac spokojnie.