Разрешение экрана. Все о пикселях

01.03.2025

Физическое и логическое разрешение

Разрешение, которое видит браузер (логическое разрешение), отличается от физического разрешения экрана из-за плотности пикселей (PPI) и масштабирования.

Физическое разрешение — реальное количество пикселей на экране (например, 2560×1440).
Логическое разрешение (viewport) — виртуальное разрешение, с которым работает браузер, учитывая масштабирование (devicePixelRatio).
Например:
- iPhone 16 Pro Max (физическое: 2868×1320) → логическое: 440×956 (при devicePixelRatio = 3).
- Samsung Galaxy S23 Ultra (физическое: 3088×1440) → логическое: 1440×720 (при масштабировании 1.5x).

Как браузер определяет разрешение?

Браузеры используют CSS-пиксели (логические), которые зависят от:

Метатега
"<meta name="viewport" content="width=device-width, initial-scale=1">"
Плотности пикселей (например, Retina-экраны Apple имеют devicePixelRatio = 2 или 3).
Настроек масштабирования в ОС.

Почему 320px? Где это используется?

Уже практически нигде!

Примерно в 2018–2020 годах производители массово перестали выпускать смартфоны с логическим разрешением 320px.

Однако, если активируется масштабирование экрана (не путать с размером шрифта!), браузер может изменить viewport.

Например:

На Android: Настройки → Дополнительные настройки → Спец. возможности → Увеличение экрана.
В этом случае viewport уменьшится (например, с 360px до 320px), чтобы вместить увеличенные элементы.

На самом деле, если вы разрабатываете приложение или сайт в 2025 году, 360×640 – минимальный viewport, на который стоит ориентироваться.

И всё же, 320px нужное разрешение!

Для блоков с активными элементами (например, интерактивные карты или изображения со ссылками) рекомендуется добавлять боковые отступы. Это улучшает юзабилити — пользователю будет удобнее скроллить и взаимодействовать с контентом, не задевая края экрана.

Пример для разрешения 360px:

Отступы: по 20px слева и справа → чтобы избежать «прилипания» элементов к границам.
Ширина контента: 360px – 40px = 320px → остается для основного содержимого.

Зачем это нужно?
На узких экранах (смартфоны) такие отступы:

Упрощают навигацию пальцем.
Защищают от случайных кликов за пределы экрана.
Делают интерфейс визуально аккуратнее.

Немного исторической справки о разрешениях 320px

Примерно в 2018–2020 годах производители массово перестали выпускать смартфоны с логическим разрешением 320px. Вот ключевые этапы:

До 2015 года: Эра 320px

Устройства: Nokia Lumia 520, Samsung Galaxy Young, Sony Xperia E, iPhone 4/4S (в режиме совместимости).
Причина: Низкая стоимость экранов 480×800 (логическое 320×533 при DPR=1.5).

2016–2017: Переход на HD+

Бюджетные смартфоны перешли на экраны 720×1280 (логическое 360×640 при DPR=2).
Примеры: Xiaomi Redmi 4, Samsung Galaxy J5 (2016).
Исключения: Недорогие Nokia (например, Nokia 216 в 2017) сохраняли 320×240, но это были кнопочные телефоны.

2018–2020: Исчезновение 320px

Даже ультрабюджетные Android-смартфоны стали использовать 720×1440 (логическое 360×720).
Примеры:
- Xiaomi Redmi Go (2019) – 720×1280 (360×640).
- Nokia 1.3 (2020) – 720×1440 (360×720).
Итог: К 2020 году разрешение 320px осталось только в:
- Устаревших кнопочных телефонах (Nokia 105 4G).
- IoT-гаджетах (детские часы, трекеры).

2021–2024: Полное доминирование 360px+

Минимальное логическое разрешение для новых смартфонов – 360×640 (Redmi A2, 2023).
Причины:
- Рост диагоналей экранов (даже в бюджетниках – 6″ вместо 4″).
- Стандарты адаптивной вёрстки (Material Design, iOS Human Interface).
- Пользователи ожидают чёткого изображения (Retina-экраны с DPR=2–3).

Исключения (после 2020)

Nokia 225 4G (2021): Физическое 240×320 → логическое 240×320 (но это кнопочный телефон с базовым браузером).
Энергоэффективные гаджеты: Например, Light Phone 2 (2019) – 480×128 (для текста и простых уведомлений).

Региональные особенности

Россия (2020–2023): Доля 320px не превышала 1–2% (данные Яндекс.Метрики).
Индия/Африка (2023): Около 3–5% за счет старых Nokia и Samsung J-серии.
Европа/США: Практически 0%, так как рынок обновляется быстрее.

Почему 320px «умерло»?

Эволюция Android/iOS: Интерфейсы стали сложнее, элементы крупнее – на 320px они не помещаются.
Контент: Веб-сайты и приложения оптимизированы под 360px+ (Google считает их мобильно-дружественными).
Пользовательский опыт: Мелкий текст и кнопки на 320px раздражают современных пользователей.

Какие физические разрешения экранов популярны в 2025 году?

Вот список распространенных разрешений экранов и устройств, на которых они используются:

Смартфоны

HD (720p): 1280×720
Устройства: Бюджетные смартфоны (например, Xiaomi Redmi A-серии, Samsung Galaxy A0x).
Full HD+ (1080p): 1920×1080 (или вариации 2340×1080, 2400×1080)
Устройства: Средний и премиум-сегмент (Samsung Galaxy S23 FE, Google Pixel 7a).
Quad HD+ (1440p): 2560×1440 (или 3200×1440)
Устройства: Флагманы (Samsung Galaxy S23 Ultra, OnePlus 11).
4K (2160p): 3840×2160
Устройства: Sony Xperia 1 V, некоторые модели для VR/съемки видео.

Планшеты

HD (720p): 1280×720
Устройства: Бюджетные планшеты (Lenovo Tab M).
Full HD (1080p): 1920×1080
Устройства: Средний класс (Samsung Galaxy Tab S6 Lite).
2K/Quad HD: 2560×1440 или 2560×1600
Устройства: Huawei MatePad Pro, Xiaomi Pad 6.
4K: 3840×2160
Устройства: iPad Pro 12.9″ (с 2021), премиум-планшеты.

Ноутбуки

HD (1366×768):
Устройства: Бюджетные ноутбуки (Acer Aspire 3).
Full HD (1920×1080):
Устройства: Большинство современных ноутбуков (Dell XPS 13, MacBook Air).
2K/QHD (2560×1440):
Устройства: Игровые и профессиональные модели (Lenovo Legion 5 Pro).
4K/UHD (3840×2160):
Устройства: Премиум-ноутбуки (Dell XPS 15, MacBook Pro 16″).
Нестандартные соотношения:
- 3:2 (3000×2000): Microsoft Surface Laptop Studio.
- 16:10 (2880×1800): MacBook Pro 14″.

Мониторы

Full HD (1920×1080):
Для: Офисные задачи, бюджетные ПК.
2K/QHD (2560×1440):
Для: Геймеры, дизайнеры (ASUS ROG Swift).
4K/UHD (3840×2160):
Для: Профессиональная работа, контент-мейкеры (LG UltraFine).
UltraWide (3440×1440, 5120×1440):
Для: Мультизадачность, симуляторы (Samsung Odyssey G9).
5K (5120×2880):
Для: Apple Studio Display, профессиональная графика.
8K (7680×4320):
Для: Нишевые мониторы (Dell UltraSharp 32″).

Телевизоры

Full HD (1920×1080):
Устройства: Бюджетные модели (до 43″).
4K/UHD (3840×2160):
Устройства: Большинство современных ТВ (Samsung QLED, LG OLED).
8K (7680×4320):
Устройства: Премиум-телевизоры (Samsung QN900B, LG 88Z2).

Устройства VR/AR

Per-eye разрешения:
- 1832×1920 (на глаз): Meta Quest 3.
- 2448×2448 (на глаз): Apple Vision Pro.

Умные часы

240×240:
Устройства: Amazfit Bip U.
368×448:
Устройства: Apple Watch Ultra 2.

Складные устройства

Внешний экран: 1080×2340 (Galaxy Z Fold 5).
Внутренний экран: 2208×1768 (Galaxy Z Fold 5).

Игровые консоли

PS5/Xbox Series X: Поддержка 4K (3840×2160) @ 120 Гц.
Nintendo Switch: 720p (портативный режим), 1080p (док-станция).

Тренды:

В смартфонах и ТВ доминирует 4K, но в массовом сегменте чаще используется Full HD+/QHD+.
Мониторы и ноутбуки переходят на 16:10 и 3:2 для продуктивности.
В игровых мониторах популярны UltraWide (21:9) и высокая частота обновления (до 360 Гц).

Какие логические разрешения экранов популярны в 2025 году?

Разрешение, которое видит браузер на смартфоне (логическое разрешение или viewport), часто отличается от физического разрешения экрана из-за плотности пикселей (PPI) и масштабирования. А именно логическое разрешение важно при разработке браузерного контента (сайтов).

Физическое разрешение — реальное количество пикселей на экране (например, 2560×1440).
Логическое разрешение (viewport) — виртуальное разрешение, с которым работает браузер, учитывая масштабирование (devicePixelRatio).
Например:
- iPhone 16 Pro Max (физическое: 2868×1320) → логическое: 440×956 (при devicePixelRatio = 3).
- Samsung Galaxy S23 Ultra (физическое: 3088×1440) → логическое: 1440×720 (при масштабировании 1.5x).

Мировая статистика

Топ-5 логических разрешений для смартфонов:

Разрешение	Доля (%)
360×800	~18%
390×844	~15%
412×915	~12%
375×667	~10%
393×852	~9%

Прочие популярные разрешения:

428×926 (iPhone Pro Max) — ~7%.
360×640 (бюджетные Android) — ~6%.
414×896 (iPhone XR/11) — ~5%.

Статистика по России

Российский рынок сильнее смещен в сторону бюджетных Android-устройств, поэтому доминируют разрешения 360×800 и 360×640:

Разрешение	Доля (%)
360×800	~25%
360×640	~15%
390×844	~12%
412×915	~10%
375×667	~8%

Ноутбуки и планшеты

1366×768 — ~20% (бюджетные ноутбуки).
1920×1080 — ~45% (основная масса устройств).
1440×900 — ~10% (MacBook Air, старые модели).
2560×1440 — ~8% (игровые ноутбуки, мониторы).

Итог. На что ориентироваться?

Рекомендации для ТЗ дизайнеру:

Основной фокус:
Сделайте сайт адаптивным для двух ключевых диапазонов:

Смартфоны:
Популярные разрешения:
- 360×640
- 375×667
- 390×844
- 412×915
- 428×926 (вертикальный режим).

Ноутбуки/ПК:
Популярные разрешения:
- 1366×768(HD)
- 1440×900
- 1536×864
- 1920×1080(Full HD).

Проверка на 2K/4K мониторах:

Если используется «резиновая» верстка (когда контент растягивается), убедитесь, что сайт не «ломается» на больших экранах (2560×1440, 3840×2160).

Почему важно? Устройств с такими разрешениями становится всё больше — без проверки через год сайт может выглядеть пустым или неаккуратным.

Горизонтальный просмотр на смартфонах:

Проверьте, как сайт отображается при разрешениях между 428px и 1366px (например, 600px, 768px, 1024px). Это важно, когда пользователи поворачивают телефон горизонтально или используют планшеты.

Как это объяснить дизайнеру?

«Сайт должен удобно масштабироваться от маленьких экранов до больших.
Особое внимание — проверке на очень крупных мониторах (2K/4K) и промежуточных размерах, чтобы не пришлось переделывать верстку в будущем».

Какие разрешения проверяет Google PageSpeed Insights?

Mobile — 412x823
Desktop — 1350x940

Автор: Айнюков Егор