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 (Kwiecień 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.