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),
Kategorie: Pozostałe. Tagi: #android, #Internet Explorer, #iphone, #opera, #windows, #safari, #ios, #windows phone, #firefox, #chrome, #strona, #przeglądarka. Źródło obrazków: Pixabay, Font awesome.
