Jak sprawdzić stronę we wszystkich przeglądarkach?

Bartosz

Bartosz Stefanicki 18 grudnia 2019

Jak sprawdzić stronę we wszystkich przeglądarkach?

Osoby tworzące strony internetowe powinny je tworzyć tak, by wyglądały tak samo we wszystkich przeglądarkach internetowych. Czy wejdziemy na stronę z Internet Explorera, Firefoksa, Opery, Safari, czy z Chrome. Powinny wyglądać wszędzie identycznie. Jak sprawdzić jak wygląda strona bez instalacji wszystkich przeglądarek?

Jest na to prosty sposób. Kilka stron umożliwia wygenerowanie podglądu z poziomu różnych przeglądarek. Ba, proponują podgląd z poziomu komputera, a nawet z telefonu komórkowego czy tabletu. Sprawdźmy zatem, czy użytkownicy danej przeglądarki nie są pokrzywdzeni przez naszą nieuwagę.

1. Browser Stack

Zacznę od mojego faworyta. Bez problemu wygenerowałem podgląd itporady.pl z poziomu przeglądarek dostępnych na komputery, jak i telefony komórkowe. iOS, Android, Windows Phone? Nie ma problemu. Różne wersje przeglądarek? Nie ma problemu. Warto też dodać, że wygenerowanie takiego podglądu naprawdę nie trwało długo (3-4 minuty). Generuje się domyślnie 15 screenshotów.

Adres strony: browserstack.com/screenshots.

2. Browser Shots

To samo co wyżej. Przy czym, bez telefonów komórkowych. Generowanych jest domyślnie 117 screenshotów, co zajęło 15 minut.

Adres strony: browsershots.org.

3. Browserling

Inne podejście ma Browserling. Tutaj wprowadzamy adres strony, wybieramy przeglądarkę oraz jej wersję. Nie jest generowany podgląd. Przez 3 minuty możemy testować naszą stronę "na żywo", jakbyśmy uruchomili maszynę wirtualną z daną przeglądarką o danej wersji. Ciekawy projekt, na pewno warto o nim wspomnieć.

Adres strony: browserling.com.

4. Widok trybu responsywnego

Powyższa nazwa występuje w przeglądarce Mozilla Firefox. Polega na tym, że możemy dynamicznie zmieniać orientację ekranu i jego rozdzielczość. Tym samym sprawdzamy, jak wygląda testowana strona na różnych urządzeniach - tabletach, konkretnych modelach smartfonów (dostępne w Safari - można sprawdzić konkretne modele iPhoneów, w innych przeglądarkach czasami można wybrać popularniejsze modele smartfonów, bądź po prostu można podać rozdzielczość ekranu).

Funkcja występuje w przeglądarkach:

  • Safari - Menu Programowanie > Uruchom tryb projektu reaktywnego
  • Mozilla Firefox - Menu Narzędzia > Dla twórców stron > Widok trybu responsywnego
  • Chrome - Menu Programista > Narzędzia dla programistów > Ikona w lewym górnym rogu "Toggle device toolbar" (Ctrl+M)

Warto zobaczyć

Szukasz hostingu?

Jest dużo firm oferujących hosting, ale którą wybrać? Przedstawiamy zestawienie najciekawszych propozycji i ranking hostingów (Październik 2022).

Data publikacji: 07.02.2015 r. Tagi: android, Internet Explorer, iphone, opera, windows, safari, ios, windows phone, firefox, chrome, strona, przeglądarka. Źródło obrazka porady: Pixabay.

4 komentarzy


© 2005-2022 itporady.pl. Wszystkie prawa zastrzeżone.

Używamy informacji zapisanych za pomocą cookies i podobnych technologii m.in. w celach reklamowych, statystycznych oraz dostosowania naszych serwisów do indywidualnych potrzeb użytkowników.