Firefox i mobilny wygląd strony na desktopie

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:

Responsive Design View - screenshot

Ź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:

  1. Responsive Design View – pełny opis narzędzia (ang.)
  2. Responsive Web design – ogólnie o responsywnych stronach WWW (ang.)

10 odpowiedzi do “Firefox i mobilny wygląd strony na desktopie”

  1. G. Chrome ;o) ma to od dawna i też się chyba specjalnie nie chwalili (ale tu mogę być w błędzie, bo nie śledzę wieści z rynku ukierunkowanego na rozwiązania mobilne). Prawoklik, „Zbadaj element” i w oknie „narzędzi dla programistów” w górnym pasku po lewej obok ikony lupy jest ikona srajfona z opisem „Toggle device mode”. Wystarczy w nią kliknąć.

  2. @Monter Dzięki za opis dla Chrome (ależ to schowali…). Wiem, że ma ono fajne developer tools, ale… nie korzystam z Chrome praktycznie. Z innych ciekawych – w Chrome są predefiniowane widoki dla popularniejszych mobilków.

  3. Firefox pewnie też tylko najpewniej w postaci jakiejś wtyczki. Ale od pewnego czasu większość przydatnych rzeczy, podobnie jak w Chromie, została zintegrowana też dowiedziałem się przez przypadek, bo zdarza mi się z roztargnienia korzystać ze skrótów klawiszowych używanych w emulatorze terminala (ctrl+shift+c i ctrl+shift+v), które w nowym Firefoksie otwierają narzędzia programistyczne. 😉

  4. Polecam chrome Camary jeśli ktoś używa Windowsa. I tak, od bardzo dawna działa w trybie deweloperskim, zwłaszcza jak podlaczymy androida (przeglądarka ma wbudowane narzędzia np adb)

  5. Ja trochę z innej beczki- co ja paczę, „Księga z Kells”! Jeśli będziesz kiedyś w Dublinie postaraj się ją zobaczyć, robi wrażenie i ona, i cała ekspozycja, coś niewiarygodnego. Jest też film/bajka „Secret of Kells”, bardzo oryginalna.
    🙂

  6. Opisy nie oddaja uroku, naprawdę.
    Co do samej księgi – początkowo byłam nieco zawiedziona czytając o tym, że nie jest wielkim manuskryptem – bo jest nieduża. Potem zdecydowałam się na spacer (Trinity College mam prawie w sąsiedztwie) i zobaczyłam całą wystawę, filmy o introligatorstwie, o tym, jak szyto Księgę, prezentacje minerałów z których pozyskiwano farby używane podczas tworzenia księgi, napisy na ścianach (Pangur Ban ma tam znaczące miejsce) i wsiąkłam na amen.
    Film jest uroczy, nietypowy, bardzo polecam.
    🙂

  7. @squirk Domyślam się, że nie oddają. Bardziej o historii i co to w ogóle jest. TBH w ogóle nie zwróciłem uwagi jak wklejałem screenshota – ot, jakiś dywan przemknęło mi przez głowę (dobra dobra, widzę, że book, ale co ja poradzę na skojarzenia?). Jak będę w Dublinie, to nie omieszkam. Thx!

  8. Da się to jakość obejść lub wyłączyć? Tak, aby strony ciągle działały w „pełnym” trybie? Bo wolę korzystać z przeglądarki na połowie ekranu, a część z nich włącza się w tym „mobilnym” trybie, a nie zawsze jest on lepszy na desktopie z mychą „zamiast” dotyku…

    Ciągle chodzi mi o Firefoxa (oraz Waterfoxa).

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *