• 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 ?

VPS Starter Arubacloud
+1 głos
2,417 wizyt
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

+4 głosów
odpowiedź 18 czerwca 2017 przez Assasz Nałogowiec (30,460 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ć.
+3 głosów
odpowiedź 18 czerwca 2017 przez Kamil Naja Nałogowiec (27,330 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 314 wizyt
pytanie zadane 17 kwietnia 2017 w HTML i CSS przez czujek22 Dyskutant (7,670 p.)
0 głosów
3 odpowiedzi 9,844 wizyt
pytanie zadane 24 stycznia 2017 w HTML i CSS przez Krzysztof Trybuś Mądrala (5,280 p.)
0 głosów
3 odpowiedzi 612 wizyt
pytanie zadane 4 lutego 2019 w HTML i CSS przez GaryNJ Nowicjusz (240 p.)

92,454 zapytań

141,262 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...