Розміри та роздільна здатність екранів пристроїв

Швидкий довідник розмірів екранів, на які насправді орієнтуються дизайнери та розробники: CSS viewport, який бачить макет, фізична роздільна здатність панелі, співвідношення пікселів пристрою (DPR), що пов'язує їх, та співвідношення сторін. Шукайте за назвою або фільтруйте за категорією — ваш поточний пристрій визначається та підсвічується автоматично.

Ваш пристрій

—

Визначення вашого пристрою…

Показано 46 із 46 пристроїв

	Тип				Пропорції
4K laptop (200% scaling)	Ноутбук	1920×1080	3840×2160	2×	16:9
4K UHD monitor (100%)	Настільний ПК	3840×2160	3840×2160	1×	16:9
4K UHD monitor (150% scaling)	Настільний ПК	2560×1440	3840×2160	1.5×	16:9
5K display / Studio Display	Настільний ПК	2560×1440	5120×2880	2×	16:9
FHD laptop (1080p, 100%)	Ноутбук	1920×1080	1920×1080	1×	16:9
FHD laptop (1080p, 150% scaling)	Ноутбук	1280×720	1920×1080	1.5×	16:9
Full HD monitor (1080p)	Настільний ПК	1920×1080	1920×1080	1×	16:9
Google Pixel 6a / 7a	Телефон	412×915	1080×2400	2.6×	20:9
Google Pixel 7 / 8	Телефон	412×915	1080×2400	2.625×	20:9
Google Pixel 8 Pro	Телефон	448×998	1344×2992	3×	20:9
HD laptop (1366×768)	Ноутбук	1366×768	1366×768	1×	16:9
iMac 24" (4.5K)	Настільний ПК	2240×1260	4480×2520	2×	16:9
iPad (10th gen)	Планшет	820×1180	1640×2360	2×	~3:2
iPad (9th gen)	Планшет	810×1080	1620×2160	2×	4:3
iPad Air 11" (M2)	Планшет	820×1180	1640×2360	2×	~3:2
iPad mini (6th gen)	Планшет	744×1133	1488×2266	2×	~3:2
iPad Pro 11" (M4)	Планшет	834×1210	1668×2420	2×	~3:2
iPad Pro 13" (M4)	Планшет	1024×1366	2048×2732	2×	4:3
iPhone 12 / 13 / 14	Телефон	390×844	1170×2532	3×	19.5:9
iPhone 12 mini / 13 mini	Телефон	375×812	1080×2340	3×	19.5:9
iPhone 14 Plus / 15 Plus / Pro Max / 16 Plus	Телефон	430×932	1290×2796	3×	19.5:9
iPhone 14 Pro / 15 / 15 Pro / 16	Телефон	393×852	1179×2556	3×	19.5:9
iPhone 16 Pro	Телефон	402×874	1206×2622	3×	19.5:9
iPhone 16 Pro Max	Телефон	440×956	1320×2868	3×	19.5:9
iPhone SE (2nd/3rd gen)	Телефон	375×667	750×1334	2×	16:9
iPhone XR / 11	Телефон	414×896	828×1792	2×	19.5:9
MacBook Air / Pro 13" (M1/M2)	Ноутбук	1440×900	2560×1600	2×	16:10
MacBook Air 13" (M2/M3)	Ноутбук	1470×956	2560×1664	2×	16:10
MacBook Air 15" (M2/M3)	Ноутбук	1710×1107	2880×1864	2×	16:10
MacBook Pro 14" (M1–M4)	Ноутбук	1512×982	3024×1964	2×	~16:10
MacBook Pro 16" (M1–M4)	Ноутбук	1728×1117	3456×2234	2×	~16:10
QHD laptop (1440p)	Ноутбук	2560×1440	2560×1440	1×	16:9
QHD monitor (1440p)	Настільний ПК	2560×1440	2560×1440	1×	16:9
Samsung Galaxy A54 / A34	Телефон	360×800	1080×2400	2.75×	20:9
Samsung Galaxy S20 / S21	Телефон	360×800	1080×2400	3×	20:9
Samsung Galaxy S22 / S23 / S24	Телефон	360×780	1080×2340	3×	19.5:9
Samsung Galaxy S24 Ultra	Телефон	384×832	1440×3120	3.75×	19.5:9
Samsung Galaxy Tab A8 / A9	Планшет	800×1280	1200×1920	1.5×	16:10
Samsung Galaxy Tab S8 / S9	Планшет	800×1280	1600×2560	2×	16:10
Super ultrawide (5120×1440)	Настільний ПК	5120×1440	5120×1440	1×	32:9
Surface Laptop 13.5"	Ноутбук	1504×1002	2256×1504	1.5×	3:2
Surface Pro 9	Ноутбук	1440×960	2880×1920	2×	3:2
Ultrawide (2560×1080)	Настільний ПК	2560×1080	2560×1080	1×	21:9
Ultrawide (3840×1600)	Настільний ПК	3840×1600	3840×1600	1×	12:5
Ultrawide QHD (3440×1440)	Настільний ПК	3440×1440	3440×1440	1×	21:9
WUXGA monitor (1200p)	Настільний ПК	1920×1200	1920×1200	1×	16:10

Працюєте з власним екраном? Відкрити Viewport Sizer · Який розмір мого екрана?

Логічна й фізична роздільна здатність та DPR

Кожен сучасний екран має дві роздільні здатності. Фізична роздільна здатність — це реальна кількість пікселів, вбудованих у панель, наприклад 1179 × 2556 на iPhone 15. Логічна (CSS) роздільна здатність — це менший координатний простір, у якому верстається вебсторінка, наприклад 393 × 852. Співвідношення пікселів пристрою (DPR) є мостом між ними: це фізична роздільна здатність, поділена на логічну, тож DPR, що дорівнює 3, означає, що телефон малює блок 3 × 3 реальних пікселів на кожен CSS-піксель. Екрани з високою щільністю пікселів, як-от «Retina»-дисплеї телефонів і ноутбуків, використовують DPR 2 або 3 для чіткого відображення тексту й зображень, тоді як типовий монітор настільного комп'ютера має DPR 1, де один CSS-піксель дорівнює одному фізичному пікселю.

Чому дизайнери працюють із розмірами viewport

Коли ви створюєте адаптивний макет, ваші CSS-медіазапити та брейкпоінти вимірюються в CSS-пікселях — логічному viewport, — а не у фізичних пікселях панелі. Телефон, який фізично має ширину 1080 пікселів, усе одно повідомляє viewport лише 360–414 CSS-пікселів, тому брейкпоінт 360px для мобільних охоплює більшість Android-телефонів. Проєктування під viewport, а не під сиру роздільну здатність, зберігає однаковий фізичний розмір тексту та елементів для дотику на пристроях із дуже різною щільністю пікселів, тож той самий макет виглядає правильно і на ноутбуці з низькою щільністю, і на флагманському телефоні з високою.

Як читати цю таблицю

Viewport (у CSS px) — це логічний розмір, який бачить вебсторінка, наведений у природній орієнтації пристрою: книжковій (portrait) для телефонів і планшетів та альбомній (landscape) для ноутбуків і моніторів.
Фізична роздільна здатність — це справжня кількість пікселів панелі, значення, яке вказують у технічних характеристиках.
DPR (співвідношення пікселів пристрою) масштабує viewport до фізичної роздільної здатності; будь-яке значення понад 1 означає дисплей із високою щільністю пікселів.
Співвідношення сторін — це форма екрана: від видовженого 19.5:9 у сучасних телефонів до 16:9 у більшості моніторів і 21:9 та 32:9 у надширокоформатних моделей.
Рядки для ноутбуків і 4K відображають типовий рівень масштабування дисплея за замовчуванням, тому viewport може бути меншим за нативну роздільну здатність панелі.

Розміри змінюються з кожною моделлю

Сприймайте ці значення як практичний довідник, а не гарантію. Виробники переглядають розміри екранів майже в кожному поколінні — лише iPhone випускав моделі з viewport шириною 375, 390, 393, 402, 414, 430 і 440 CSS-пікселів, — а пристрої на Android відрізняються ще сильніше. Масштабування дисплея в операційній системі знову змінює звітований viewport: ноутбук із Windows і роздільною здатністю 1080p при масштабуванні 150% поводиться як екран 1280 × 720 із DPR 1.5. Найнадійніше значення — це завжди те, яке повідомляє ваш власний браузер, тому відповідний пристрій вище визначається наживо з вашого екрана.