Дані екрана й вікна
Якщо не вказано інше, розміри наведено в CSS-пікселях, одиницях, якими користуються сайти. Для точних цифр установіть масштаб браузера 100% (Ctrl+0 або ⌘0 на Mac).
- Роздільна здатність екрана
- Перевіряємо… Розмір екрана, який бачать сайти.
- Фізична роздільна здатність
- Перевіряємо…Роздільна здатність екрана × щільність пікселів: справжні пікселі матриці.
- Область перегляду (viewport)
- Перевіряємо… Видима частина сторінки без панелей інструментів.
- Усе вікно браузера
- Перевіряємо…
- Доступна область екрана
- Перевіряємо…Екран без панелі завдань, Dock або рядка меню.
- Щільність пікселів
- Перевіряємо…
- Співвідношення сторін
- Перевіряємо…
- Орієнтація
- Перевіряємо…
- Глибина кольору
- Перевіряємо…
- Колірне охоплення
- Перевіряємо…
- HDR
- Перевіряємо…
- Частота оновлення
- Перевіряємо…
- Сенсорний екран
- Перевіряємо…
- Монітори
- Перевіряємо…
Область перегляду на вашому екрані
Зовнішня рамка показує ваш екран, а затінена область показує видиму частину цієї сторінки, тобто місце, де розташоване вікно браузера.
Поширені роздільні здатності екрана
Роздільну здатність моніторів і ноутбуків наведено у фізичних пікселях, а телефонів і планшетів у CSS-пікселях, як їх бачать сайти. Рядки, що збігаються з вашим екраном, позначено.
| Назва | Роздільна здатність | Співвідношення сторін | Де трапляється |
|---|---|---|---|
| HD (720p) | 1280 × 720 | 16:9 | HD-телевізори, невеликі ноутбуки |
| WXGA | 1366 × 768 | 16:9 | Бюджетні ноутбуки |
| HD+ | 1600 × 900 | 16:9 | 17-дюймові ноутбуки, старі монітори |
| Full HD (1080p) | 1920 × 1080 | 16:9 | Більшість моніторів і ноутбуків |
| WUXGA | 1920 × 1200 | 16:10 | Офісні монітори, ноутбуки |
| QHD / 2K (1440p) | 2560 × 1440 | 16:9 | 27-дюймові монітори, ігри |
| WQXGA | 2560 × 1600 | 16:10 | MacBook Air і Pro, ноутбуки 16:10 |
| UWQHD | 3440 × 1440 | 21:9 | 34-дюймові ультраширокі монітори |
| 4K UHD (2160p) | 3840 × 2160 | 16:9 | 4K-монітори й телевізори |
| 5K | 5120 × 2880 | 16:9 | iMac, Apple Studio Display |
| iPhone 12 / 13 / 14 | 390 × 844 | 19.5:9 | iPhone (CSS-пікселі) |
| iPhone 15 / 16 | 393 × 852 | 19.5:9 | iPhone (CSS-пікселі) |
| Android | 412 × 915 | 20:9 | Телефони на Android (CSS-пікселі) |
| iPad | 810 × 1080 | 4:3 | iPad (CSS-пікселі) |
Що таке роздільна здатність екрана
Роздільна здатність екрана це кількість пікселів, які дисплей показує по горизонталі й по вертикалі. Її записують як ширина × висота. Монітор Full HD має роздільну здатність 1920 × 1080: 1920 пікселів завширшки й 1080 заввишки, загалом близько двох мільйонів пікселів. У розмовній мові її часто називають «розширенням екрану», але правильний термін саме роздільна здатність.
Що більше пікселів на екрані того самого розміру, то чіткіші текст і зображення. Тому 13-дюймовий ноутбук може мати вищу роздільну здатність, ніж 24-дюймовий офісний монітор.
Чому роздільна здатність нижча, ніж у монітора
Windows, macOS, iOS і Android збільшують усе на екрані, щоб текст залишався читабельним на чітких дисплеях. Ноутбук із матрицею 1920 × 1080 і масштабом 125% повідомляє сайтам, що його екран 1536 × 864, а MacBook із матрицею 2560 × 1600 зазвичай показує 1440 × 900 або 1470 × 956.
Сайти бачать лише ці масштабовані розміри, їх називають CSS-пікселями. Помножте їх на щільність пікселів (device pixel ratio), і отримаєте фізичну роздільну здатність, яку ця сторінка показує під основною цифрою. Масштаб браузера теж змінює щільність пікселів, тому перед порівнянням поверніть його на 100%.
Роздільна здатність екрана, область перегляду й розмір вікна
- Роздільна здатність екрана: увесь дисплей, разом із частинами, які закривають інші вікна.
- Доступна область екрана: дисплей без панелі завдань, Dock або рядка меню.
- Вікно браузера: усе вікно, разом із вкладками, адресним рядком і рамками.
- Область перегляду (viewport): частина вікна, у якій відображається сторінка. Саме на цьому розмірі вебдизайнери перевіряють верстку. Він змінюється, коли ви змінюєте розмір вікна або відкриваєте інструменти розробника.
Як змінити роздільну здатність екрана
- Windows 11 і 10: клацніть правою кнопкою на робочому столі > Настройки дисплея > Роздільна здатність дисплея. Варіант із позначкою (рекомендовано) це рідна роздільна здатність монітора. Масштаб налаштовується трохи вище.
- macOS: меню Apple > Системні параметри > Дисплеї, потім виберіть розмір. Більший текст означає менше CSS-пікселів, але більших; фізична роздільна здатність матриці не змінюється.
- iPhone і Android: роздільна здатність фіксована. Масштаб дисплея (iPhone) або Розмір екрана (Android) змінює розмір елементів, а отже, і CSS-розмір, який бачать сайти.
- Для найчіткішого зображення залиште рідну роздільну здатність і змінюйте масштаб.
Запитання
Яка в мене роздільна здатність екрана?
Її показано вгорі цієї сторінки, дані беруться з вашого браузера. Велика цифра це розмір, який бачать сайти; рядок під нею показує фізичну роздільну здатність дисплея і масштаб, установлений у системі.
Чому показує 1536 × 864, якщо монітор має 1920 × 1080?
У системі встановлено масштаб 125%, тому сайти бачать екран у 1,25 раза менший. Фізична роздільна здатність монітора й далі 1920 × 1080, її вказано під основною цифрою. Так само масштаб 150% перетворює 1920 × 1080 на 1280 × 720.
1920 × 1080 це те саме, що 1080p і 2K?
1920 × 1080 це Full HD, його також називають 1080p. Для моніторів 2K зазвичай означає 2560 × 1440 (QHD або 1440p), хоча в кіно 2K це 2048 × 1080. 4K UHD це 3840 × 2160, учетверо більше пікселів, ніж у 1080p.
Що таке область перегляду (viewport)?
Область перегляду це частина вікна браузера, у якій відображається сторінка, без вкладок, адресного рядка й смуг прокручування. Під цей розмір підлаштовуються адаптивні сайти, тому саме його мають на увазі дизайнери, коли питають розмір вашого браузера.
Що таке щільність пікселів (device pixel ratio)?
Це кількість фізичних пікселів в одному CSS-пікселі. Значення 1 означає, що масштабування немає, 2 типове для Mac із Retina й багатьох телефонів, 3 для останніх iPhone. Масштаб браузера теж його змінює.
Як дізнатися роздільну здатність екрана телефона?
Відкрийте цю сторінку на телефоні. Телефони повідомляють розмір у CSS-пікселях, наприклад 393 × 852 на iPhone 15. Помножте його на щільність пікселів (3 на цьому iPhone), і отримаєте 1179 × 2556 пікселів матриці. Ця сторінка рахує це за вас.
Чи точна частота оновлення?
Її вимірюють за тим, як часто браузер малює кадр, тому значення близьке, але не точне. Режим енергозбереження, фонова вкладка або завантажений комп'ютер можуть занизити результат порівняно з налаштуванням дисплея.
Посібники
- Що таке IP-адреса?
IP-адреса — це номер, за яким інтернет знає, куди надсилати призначені вам дані. Розповідаємо, як вона виглядає, якою буває і що ваша IP говорить про вас.
- Як дізнатися свою IP-адресу
Публічну IP можна дізнатися в один клік. Як знайти приватну, залежить від пристрою. Ось точні кроки для кожного.
- IPv4 і IPv6: у чому різниця?
IPv6 приходить на зміну IPv4, бо у світі закінчилися адреси. Порівнюємо обидва протоколи, пояснюємо, як дізнатися, який використовуєте ви, і чому IPv6 важливий, якщо у вас VPN.
- Що таке витік DNS і як його усунути?
Навіть з увімкненим VPN ваш пристрій може й далі питати в провайдера про кожен сайт, який ви відкриваєте. Це і є витік DNS. Розповідаємо, як його помітити й зупинити.