Rozmiary i rozdzielczości ekranów urządzeń

Rozdzielczość logiczna a fizyczna i DPR

Każdy współczesny ekran ma dwie rozdzielczości. Rozdzielczość fizyczna to rzeczywista liczba pikseli wbudowanych w panel — na przykład 1179 × 2556 w iPhonie 15. Rozdzielczość logiczna (CSS) to mniejsza przestrzeń współrzędnych, w której układana jest strona internetowa, np. 393 × 852. Device pixel ratio (DPR) łączy te dwie wartości: to rozdzielczość fizyczna podzielona przez logiczną, więc DPR równy 3 oznacza, że telefon rysuje blok 3 × 3 rzeczywistych pikseli na każdy piksel CSS. Telefony i laptopy o wysokiej gęstości pikseli, tzw. „Retina”, używają DPR 2 lub 3, aby renderować ostry tekst i obrazy, natomiast typowy monitor stacjonarny ma DPR równy 1, gdzie jeden piksel CSS odpowiada jednemu pikselowi fizycznemu.

Dlaczego projektanci pracują na rozmiarach viewportu

Podczas tworzenia responsywnego layoutu Twoje media queries i breakpointy CSS są mierzone w pikselach CSS — czyli w viewporcie logicznym — a nie w fizycznych pikselach panelu. Telefon, który fizycznie ma 1080 pikseli szerokości, wciąż zgłasza viewport o szerokości zaledwie 360–414 pikseli CSS, dlatego breakpoint mobilny 360px obejmuje większość telefonów z Androidem. Projektowanie względem viewportu, a nie surowej rozdzielczości, zapewnia tekstowi i elementom dotykowym spójny fizyczny rozmiar na urządzeniach o bardzo różnej gęstości pikseli, dzięki czemu ten sam layout wygląda dobrze zarówno na laptopie o niskiej gęstości, jak i na gęstym flagowym telefonie.

Jak czytać tę tabelę

• Viewport (px CSS) to logiczny rozmiar widziany przez stronę internetową, podany w naturalnej orientacji urządzenia — pionowej dla telefonów i tabletów, poziomej dla laptopów i monitorów.
• Rozdzielczość fizyczna to rzeczywista liczba pikseli panelu — wartość podawana w specyfikacji urządzenia.
• DPR (device pixel ratio) przelicza viewport na rozdzielczość fizyczną; każda wartość powyżej 1 oznacza wyświetlacz o wysokiej gęstości pikseli.
• Proporcje obrazu to kształt ekranu — od wysmukłych 19.5:9 w nowoczesnych telefonach, przez 16:9 w większości monitorów, po 21:9 i 32:9 w monitorach ultrapanoramicznych.
• Wiersze dotyczące laptopów i rozdzielczości 4K odzwierciedlają typowy domyślny poziom skalowania wyświetlacza, dlatego viewport może być mniejszy niż natywna rozdzielczość panelu.

Rozmiary zmieniają się z każdym modelem

Traktuj te wartości jako praktyczną ściągę, a nie gwarancję. Producenci zmieniają wymiary ekranów niemal w każdej generacji — sam iPhone w ostatnich modelach oferował viewporty o szerokości 375, 390, 393, 402, 414, 430 i 440 pikseli CSS — a urządzenia z Androidem różnią się jeszcze bardziej. Skalowanie wyświetlacza w systemie operacyjnym dodatkowo zmienia zgłaszany viewport: laptop z Windowsem i ekranem 1080p przy skalowaniu 150% zachowuje się jak ekran 1280 × 720 z DPR równym 1.5. Najbardziej wiarygodna jest zawsze wartość zgłaszana przez Twoją własną przeglądarkę, dlatego pasujące urządzenie powyżej jest wykrywane na żywo na podstawie Twojego ekranu.