Jak testujecie czy strona jest responsywna ?

pytanie zadane 18 czerwca 2017 w HTML i CSS przez rafal1997 Gaduła (3,180 p.)

Witam, tworzę portfolio na Bootstrap'ie i zastanawiam się jak poprawnie przetestować stronę / jakich narzędzi użyć aby sprawdzić jak strona będzie się wyświetlać na innych urządzeniach.

komentarz 19 czerwca 2017 przez Knayder Nałogowiec (37,640 p.)

Zawsze można zmienić rozmiar okna przeglądarki :v

3 odpowiedzi

odpowiedź 18 czerwca 2017 przez Assasz Nałogowiec (30,460 p.)

odpowiedź 18 czerwca 2017 przez Kamil Naja Nałogowiec (27,410 p.)
edycja 18 czerwca 2017 przez Kamil Naja

Zacznij od upewnienia się, czy wszystko jest ok na desktopie (także na Full HD, jeśli programowałeś na 1366px i nie wiesz, co się dzieje ze stroną na wyższych rozdzielczościach). Podczas robienia frontów, staram się używać cały czas tego widoku (obrazek) i stale testuję, czy strona się nie rozwala. Dzięki temu nie ma większych niespodzianek.

Włączasz przeglądarkę w trybie mobile i zmieniasz rozdzielczości (w Chrome - wybór "responsive) - jeśli pojawia się pasek przewijania poziomego, gdzieś jest błąd. Testuje się do 320px lub 360px szerokości.

Potem można sprawdzić na poszczególnych urządzeniach mobilnych, które są emulowane przez przeglądarkę. Zwykle wynik na fizycznym urządzeniu są nieco inne - więcej błędów.

Potem przeklikujesz stronę na smartfonie/tablecie i robisz screeny tam, gdzie zobaczysz błędy. Jeśli strona nie jest dostępna na serwerze, możesz podłączyć smartfona przez narzędzia deweloperskie Chrome i debugować stronę postawioną lokalnie - działa to raczej topornie, ale można podejrzeć kod. Na urządzeniu trzeba przetestować też UX, czyli czy na przykład, jakieś elementy nie są za blisko siebie.

Alternatywą jest browser stack, ale niektóre błędy na fizycznym urządzeniu, nie będą tam widoczne.

Zawsze gdy widzisz błąd, to staraj się zrobić zrzut ekranu i go opisać, by praca nie poszła na marne.