Тест роздільної здатності екрана
Перегляньте нативну роздільну здатність вашого дисплея у фізичних пікселях разом зі співвідношенням пікселів, форматом екрана та глибиною кольору. Потім запустіть повноекранний тестовий патерн 1 піксель: за справжньої нативної роздільної здатності він читається як чиста, рівна текстура, тоді як масштабування або нативний режим виявляється як розмиття або муар.
Виявлення…
← → змінити патерн
Пікселі, що чергуються, зливаються в плавний сірий — дисплей працює в нативній роздільній здатності та при 100% масштабуванні.
Зображення розтягується — роздільна здатність, ймовірно, встановлена нижче нативної, тому GPU збільшує масштаб.
Хвилеподібні патерни виникають від інтерполяції. Скиньте зум браузера до 100% і перевірте масштабування екрана ОС.
Роздільна здатність екрана — це кількість пікселів, які відображає монітор, записана як ширина × висота — наприклад, 1920 × 1080. Більше пікселів на тій самій площі означає чіткіше й щільніше зображення. Кожна рідкокристалічна панель має одну фіксовану сітку фізичних пікселів, для якої вона призначена, — це називається нативною роздільною здатністю, і зображення виглядає найчіткіше саме при ній. Цей тест зчитує фізичну сітку пікселів, про яку повідомляє ваш браузер, і відображає її у вигляді великого числа вище, щоб ви могли підтвердити, що насправді виводить ваше обладнання.
Виберіть нижчу роздільну здатність — і GPU розтягне менше зображення на фіксовану сітку, розмиваючи все. Сучасні системи також застосовують масштабування дисплея (Retina, Windows 150%), щоб збільшити інтерфейс, зберігаючи рендеринг у повній щільності. Саме тому браузер повідомляє два розміри: CSS-вьюпорт у логічних пікселях і фізичну роздільну здатність у реальних пікселях пристрою. Співвідношення між ними — це device pixel ratio (DPR): DPR 2 означає, що кожен CSS-піксель підтримується блоком 2 × 2 фізичних пікселів, тому вьюпорт, який бачить браузер, може мати вдвічі меншу роздільну здатність, ніж екран.
Поширені роздільні здатності екрана
| Роздільна здатність | Назва | Де зустрічається |
|---|---|---|
| 1280 × 720 | HD / 720p | Старі ноутбуки, бюджетні дисплеї |
| 1920 × 1080 | Full HD / 1080p | Найпоширеніша роздільна здатність для настільних ПК і ноутбуків |
| 2560 × 1440 | QHD / 1440p | Чіткіші ігрові та робочі монітори |
| 3440 × 1440 | UltraWide QHD | Ультраширокі панелі 21:9 |
| 3840 × 2160 | 4K UHD | Великі та high-DPI екрани, телевізори |
| 1170 × 2532 | iPhone (DPR 3) | Сучасні смартфони — витягнуті панелі з високою щільністю пікселів |
Поради для точного вимірювання
- Скиньте масштаб браузера до 100% — масштабування змінює сторінку незалежно від ОС.
- У Windows виберіть роздільну здатність, позначену "(Recommended)" у Settings > System > Display.
- У macOS оберіть "Default for display" у System Settings > Displays.
- Запустіть повноекранний шаблон: рівний сірий фон означає нативний вивід, а розмиття або муар — масштабування.