Jak sprawdzić stronę we wszystkich przeglądarkach?
Pozostałe Aktualizacja: 31.08.2017

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

Test strony w różnych przeglądarkach

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

Test strony w różnych przeglądarkach

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

Test strony w różnych przeglądarkach

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)

Autor: . Tagi: , , , , , , , , , , , . Źródło obrazek główny: Pixabay.

3
Dodaj komentarz

avatar
2 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
ZdzISBartosz StefanickiPiotr Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

najnowszy najstarszy oceniany
ZdzIS
Gość
ZdzIS

Browser Stack powyżej win7 .... niestety płatny

Piotr
Gość
Piotr

Witam, a co w sytuacji gdy jeszcze nie umieściliśmy strony na serwerze, bo nadal nad nią pracujemy i chcielibyśmy sprawdzić jak "wygląda" na różnych przeglądarkach i na różnych urządzeniach (telefony, tablety różnych producentów)? Z góry dziękuje za odpowiedź.