Jak sprawdzić stronę we wszystkich przeglądarkach?

Bartosz

Bartosz Stefanicki Poniedziałek, 22.04.2024

Jak sprawdzić stronę we wszystkich przeglądarkach?

Strony internetowe powinny wyglądać tak samo we wszystkich przeglądarkach. 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 (Maj 2024).

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

4 komentarzy


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

Strona korzysta z plików cookies w celu realizacji usług i zgodnie z Polityką prywatności. Możesz określić warunki przechowywania lub dostępu do plików cookies w Twojej przeglądarce.