chevron-left chevron-right

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:

Przykład projektu w rozdzielczości 1920x1080px

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

Przykład projektu w rozdzielczości 480x800px

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:

  • Comandeer

    Nie wiem, może ja już jestem jakoś zboczony czy coś 😉 ale dla mnie logicznym jest, że używając media queries mam zamiar się wbić nie dokładnie w taką, a taką rozdzielczość, a raczej w pewien „bezpieczny przedział”. jak dla mnie „natywna rozdzielczość” nie istnieje – liczy się tylko to, co posyła mi browser

  • Trzeba się sporo nagimnastykować, aby takie rzeczy wyglądały dobrze na „starszych” telefonach. Niestety nie każdy ma Galaxy S2 czy S3, które maja wysoką rozdzielczość i na nich praktycznie wszystko wygląda dobrze :d

  • maly.wariat

    na mój gust cały „responsive design” szybko przeminie, rozdzielczości urządzeń mobilnych idą w górę i po prostu szkoda czasu lepiej zrobić dobrą wersję mobilną.

  • Piotr Nalepa

    Responsive polega też na tym, aby układ strony się dostosowywał do mobilnego urządzenia i jego ekranu. Dobra strona mobilna może być responsywna, nie trzeba tworzyć osobnych szablonów pod mobilki.

  • maly.wariat

    owszem, masz rację, ale połączenie 2 wersji w jednej to sztuka kompromisu, której nie trzeba jeśli tworzysz oddzielne szablony