Przejdź do treści

Test wyglądu strony WWW na urządzeniach mobilnych

Test wyglądu strony na urządzeniach mobilnych - foto

Obecnie używane urządzenia mobilne do serfowania po sieci mają bardzo różne rozmiary. Dlatego też monitory na których wyświetlane są strony WWW mogą mieć różne wielkości: od bardzo małych (telefony), do bardzo dużych (monitory do komputerów stacjonarnych).

Sprawdzenie jak dana strona wyświetla się na każdym monitorze jest trudne do wykonania, ponieważ konieczne byłoby posiadanie każdego z nich…

Narzędzie umożliwiające sprawdzenie jak dana strona WWW wyświetla się na urządzeniach mobilnych

Istnieje jednak inny, bardzo prosty sposób – Resposinator. Jest to dostępna w sieci darmowa aplikacja, umożliwiająca sprawdzenie jak wyświetla się dana strona WWW na następujących urządzeniach:

– iPhone eXpensive portrait · width: 375px (orientacja pionowa),

– iPhone eXpensive landscape · width: 734px (orientacja pozioma),

– iPhone 6-8 portrait · width: 375px (orientacja pionowa),

– iPhone 6-8 landscape · width: 667px (orientacja pozioma),

– iPhone 6-8 Plump portrait · width: 414px (orientacja pionowa),

– iPhone 6-8 Plump landscape · width: 736px (orientacja pozioma),

– Android (Nexus 4) portrait · width: 384px (orientacja pionowa),

– Android (Nexus 4) landscape · width: 600px (orientacja pozioma),

– iPad portrait · width: 768px (orientacja pionowa),

– iPad landscape · width: 1024px (orientacja pozioma).

Powyższy zestaw odzwierciedla najpopularniejsze urządzenia mobilne wykorzystywane do przeglądania Internetu. Dzięki aplikacji możemy zobaczyć, jak testowana strona WWW wygląda na każdym z powyższych urządzeń zarówno w orientacji pionowej, jak i poziomej.

Aby przeprowadzić test strony należy wejść pod adres: http://www.responsinator.com.

W lewym górnym rogu ekranu znajduje się pole tekstowe 'Enter your site’ do którego należy wprowadzić adres strony, którą chcemy przetestować. Następnie należy kliknąć przycisk 'GO’.

Po krótkiej chwili na ekranie wyświetlą się, jeden pod drugim, monitory wszystkich powyższych urządzeń z zawartością testowanej strony. Dzięki temu można sprawdzić, czy wszystkie elementy znajdujące się na stronie są widoczne na wszystkich monitorach – niezależnie od wielkości. Widok w każdym urządzeniu jest aktywny, tzn. umożliwia przewijanie strony za pomocą paska 'scroll’ oraz używanie strony tak jak zazwyczaj, np. klikając w linki. To bardzo przydatna funkcjonalność, gdyż pozwala także sprawdzić zachowanie się testowanej strony na monitorze o danym rozmiarze.

 

Wkrótce kolejny artykuł.