Sprawdzanie, jak strona wygląda na innej przeglądarce, w innym systemie operacyjnym czy nawet w innej rozdzielczości nigdy nie było trywialne. Stało się łatwiejsze dzięki wbudowanej w przeglądarkę Firefox funkcji pozwalającej na podgląd wyglądu strony w określonej rozdzielczości. Na przykład mobilnego wyglądu strony. Fachowa nazwa: responsive design view.
Nie zajmuję się frontendem, więc o sprawie dowiedziałem się przypadkiem. Funkcjonalność chyba nie była specjalnie nagłaśniana, w każdym razie umknęła mojej uwadze. Poza tym w obecnej, wygodnej formie dostępna jest od wersji Firefox 33.
Aby włączyć responsive design view należy wcisnąć ctrl-shift-m. Wyjście z trybu – przycisk X w lewym górnym rogu. Powinniśmy zobaczyć coś w stylu:
Źródło: https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View
Dostępne są zdefiniowane ustawienia, ale można też definiować i zapisywać własne rozdzielczości (liczby są edytowalne, następnie enter). Można także rozszerzać okno przy pomocy łapania za krawędzie. Oczywiście nie jest to równoznaczne z przetestowaniem na innym systemie operacyjnym czy w innej przeglądarce, ale jako szybkie sprawdzenie na żywo wyglądu w mniejszej rozdzielczości – idealne i warto wiedzieć, że istnieje, zwłaszcza, gdy użytkownicy zgłaszają, że strona źle wygląda w określonej rozdzielczości. Mi się ta funkcja przeglądarki Firefox przydaje głównie do szybkiego sprawdzenia mobilnego wyglądu strony.
Więcej:
- Responsive Design View – pełny opis narzędzia (ang.)
- Responsive Web design – ogólnie o responsywnych stronach WWW (ang.)
