Responsive design a rozdzielczość urządzeń mobilnych

Dzisiejszy wpis będzie poświęcony na opisanie zachowań urządzeń mobilnych przy projektowaniu mobilnej wersji strony.
Coraz częściej możemy się spotkać z tym, że dana strona dostosowuje się do urządzenia w którym jest otwierana. Zmienia swój układ pokazując lub chowając część elementów strony. Dzięki temu, każdy użytkownik strony, niezależnie z jakiego urządzenia korzysta, może mieć przystępny dostęp do informacji.

Przygotowanie środowiska testowego

Projektując ostatnio pewien układ natrafiłem na ciekawe zachowanie się urządzeń mobilnych, które przetestowałem na 3 telefonach:

• Nokia Lumia 710 (480x800)
• Samsung Galaxy S2 (480x800)
• LG Swift 3D (480x800)

Każdy z tych telefonów ma taką samą rozdzielczość, lecz może zachować się zupełnie inaczej w momencie spotkania strony posiadającej responsywny dizajn. Do testów wykorzystałem jeden z projektów które ostatnio wykonałem przy pomocy własnego frameworka bootstrapowego dostępnego na GitHubie (jest w trakcie rozwijania).

Projekt w rozdzielczości 1920x1080 pikseli wygląda następująco:

Natomiast w rozdzielczości 480x800 pikseli wygląda następująco:

Jak sprawdzano rozdzielczość urządzeń

Dizajn był przystosowywany do różnych rozdzielczości za pomocą media queries ze specyfikacji CSS3.
Zastosowałem 5 progów rozdzielczości docelowych, przy których zmieniały się parametry wyglądu strony:

1. do 320px
2. od 321px do 640px
3. od 641px do 800px
4. od 801px do 1439px
5. od 1440px do 1920px

Wyższych rozdzielczości na razie nie biorę pod uwagę.
Do sprawdzenia szerokości ekranu (bo tylko ten wymiar mnie interesował) wykorzystałem następujący kod JS:

1
2
3
4
5
6

$(function() {
	$('span','#width').text($(window).width());
	$(window).on('resize',function() {
		$('span','#width').text($(window).width());
	});
});

Powyższy kod ma za zadanie wypisać na ekran bieżącą szerokość okna przeglądarki zaraz po uruchomieniu strony a potem po każdej zmianie wielkości okna.

Testowe demo można sprawdzić pod tym adresem: responsive design demo

Wyniki testów

Po przeprowadzeniu testów okazało się, że rozdzielczość natywna urządzenia mobilnego nie odpowiada rozdzielczości okna przeglądarki w tym urządzeniu.
Urządzenia: Nokia Lumia 710 i LG Swift 3D wskazywały że szerokość ekranu wynosi 480px w pozycji horyzontalnej, a 320px w pozycji pionowej.
Natomiast Samsung Galaxy S2 wskazywał, że w pozycji poziomej ma szerokość 533px, a w pozycji pionowej 320px (czyli tak samo jak poprzednie urządzenia).

Jest to bardzo ciekawe spostrzeżenie, ponieważ zmienia to podejście do tworzenia mobilnych wersji stron internetowych. W takiej sytuacji, nie interesują nas rozdzielczości natywne urządzenia tylko rozdzielczość w jakiej przeglądarka otworzy daną stronę, której wymiary nie są oczywiste.

Dodatkowe materiały

Jeśli jesteś zainteresowany/a innymi zestawieniami odnośnie responsive design lub ciekawych narzędzi zapraszam do poniższych linków:

• zestawienie rozdzielczości uzyskiwanych za pomocą JS
• Testowanie responsive design