8.01 / 2015

Dlaczego warto znać CSS pixel ratio dla urządzeń mobilnych?

Nie wiem czy wiecie ale "CSS Pixel ratio" to bardzo ważna rzecz, z którą styka się każdy projektant front-endu RWD. Ale czym tak naprawdę jest CSS pixel ratio.

Upraszczając (kto by miał czas czytać dłuższe wyjasnienia w tych czasach) jest to stosunek fizycznych pixeli wyświetlacza urządzenia mobilnego (takiego jak np. smartphone, tablet) do CSS pixeli.

Okazuje się bowiem, że dla wyświetlaczy o wysokim zagęszczeniu pixeli (powyżej 200dpi), pixele muszą być przeskalowane. O ile bowiem iPad 1 i 2 posiadają rozdzielczość wynoszącą 1024x768 px o tyle już iPad 3, 4 oraz Air 1/2 posiadają rozdzielczość 2048x1536 px. Dopasowywanie rozmiarów elementów podczas procesu projektowego pod takie wymiary nie miało by zupełnie sensu :)

Dlatego też ktoś mądry pomyślał i wymyślił rozwiązanie. Wprowadzono CSS Pixel ratio, dzięki niemu możemy poznać rozdzielczość urządzenia pod potrzeby CSS'a i media queries (dla RWD). iPad 1 i 2 mają ratio na poziomie 1, oznacza to, że rozdzielczość urządzenia odpowiada rozdzielczości CSS czyli możemy w podglądzie widoku resposnywnego w firefoxie lub chromie ustawić rozdzielczość na 1024px dla poziomu oraz 768px dla pionu i już możemy zobaczyć jak wyglądać będzie nasza strona na takim urządzeniu. Łatwą metodą na poznanie szerokości lub wysokości na potrzeby stylowania w CSS jest podzielenie fizycznego wymiary przez CSS Pixel ratio. Przykłady znajdziecie poniżej.

Nowsze iPady wprowadzając natomiast skalowanie oraz omawiane właśnie ratio. Dla tych urządzeń wynosi ono 2. Oznacza to, że dzielimy 2048x1536 px przez 2 dla danego wymiaru. Jak łatwo zauważyć otrzymamy znajome rozmiary 1024px oraz 768px. I tutaj chciałbym osobiście pochwalić Apple za konsekwencję (nie licząc iPhona 6 plus, który się lekko wyłamuje) trzymania ratio na poziomie 1 lub 2. Co przekłada się na jednolite wartości rozdzielczości 1024px oraz 768px dla tabletów oraz 480px x 320px i 568px x 320px dla iPhonów. Docenicie to w momencie walki w wielowymiarowym świecie Androida, gdzie panuje wolna amerykanka co potrafi przy bardziej skomplikowanych stronach przysporzyć bólu głowy.

Dla przykładu Google Nexus 7 z ratio 1.325 z fizycznej rozdzielczości 1280x800px robi CSS rozdzielczość o wartościach 966x604px. Samsung Galaxy Mega 6.3 to z kolei 1280x720px z ratio 1.8 daje 711x400px :) Ni w kij ni w oko ... Dla pixel perfectów narzuca to dodatkowe break pointy (ograniczniki typu max lub min w media queries, pozwalające nakierować dane style na dane rozdzielczości). Nie pozostaje nic innego jak śledzić nowe wartości nowych urządzeń i poprawianie swoich templatek stylów CSS, pozwalających na wygodne budowanie stron w oparciu o model RWD. Najlepsze miejsce jakie do tej pory znalazłem z dużą liczbą urządzeń listującą rozdzielczości oraz ratio znajdziecie Tutaj.

2 komentarzy

  • Link do komentarza Karol Struzik 9.01.2015 Karol Struzik

    A jak się styluje pod daną rozdzielczość tak w ogóle?

  • Link do komentarza Michał Wojtasek 9.01.2015 Michał Wojtasek

    No tak, teraz już wiem czemu się tak męczyłem z "dopasowaniem" menu mojej strony na ipadzie ;) dzięki.

Skomentuj


Kontakt

Mastafu Design Freelancer
Pan Projektant :)

Zostaw wiadomość

* Podasz telefon, oddzwonię. Podasz emaila, odpiszę :)

Ta strona używa cookies i podobnych technologii.

Widzisz ten komunikat, ze względu na wymogi prawne UE. Brak zmiany ustawienia przeglądarki oznacza zgodę używanie ciasteczek na twoim komputerze.

Zrozumiałem