• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak testujecie czy strona jest responsywna ?

0 głosów
777 wizyt
pytanie zadane 18 czerwca 2017 w HTML i CSS przez rafal1997 Gaduła (3,170 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,660 p.)
Zawsze można zmienić rozmiar okna przeglądarki :v

3 odpowiedzi

+5 głosów
odpowiedź 18 czerwca 2017 przez Assasz Nałogowiec (29,110 p.)
Chrome: zbadaj -> ikona telefonu (toggle device toolbar)

Firefox: zbadaj element -> ikona telefonu (Widok trybu responsywnego)

Jak masz stronę na localhoście, to możesz na niego wejść z telefonu wpisując w przeglądarkę adres IP twojego komputera i przetestować.
+4 głosów
odpowiedź 18 czerwca 2017 przez Kamil Naja Pasjonat (24,500 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.

+2 głosów
odpowiedź 18 czerwca 2017 przez Drakster Początkujący (340 p.)
Zawsze możesz jeszcze wykonać googlowy teścik dla pewności: https://search.google.com/test/mobile-friendly

Podobne pytania

0 głosów
3 odpowiedzi 179 wizyt
pytanie zadane 17 kwietnia 2017 w HTML i CSS przez czujek22 Mądrala (7,160 p.)
0 głosów
3 odpowiedzi 3,050 wizyt
pytanie zadane 24 stycznia 2017 w HTML i CSS przez Krzysztof Trybuś Mądrala (5,150 p.)
0 głosów
3 odpowiedzi 114 wizyt
pytanie zadane 4 lutego w HTML i CSS przez GaryNJ Nowicjusz (240 p.)
Porady nie od parady
Komentarze do pytań nie służą do odpowiadania, od tego jest wydzielona sekcja odpowiedzi. Funkcją komentarzy jest natomiast możliwość uzyskania dodatkowych informacji na temat samego posta.Komentarze

67,017 zapytań

113,930 odpowiedzi

241,411 komentarzy

46,960 pasjonatów

Przeglądających: 143
Pasjonatów: 1 Gości: 142

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...