← BAZA
Research · Responsive Design

Разрешения экранов 2026.
Что реально важно для верстки.

Глобальная и испанская статистика по разрешениям mobile / desktop / tablet. Конкретные viewport'ы, доли Apple / Samsung / Xiaomi, исторические тренды и финальные breakpoints для адаптива.

StatCounter · Mar 2026 Steam Hardware · Feb 2026 Counterpoint · Q4 2025

Верстай под 6 мобильных viewport'ов, 3 десктопных и 2 планшетных — и покроешь 90%+ трафика. Главный сдвиг с 2020 года — не рост разрешений, а фрагментация: топ-6 разрешений мира дают всего ~34% трафика (было ~55% десять лет назад).

На десктопе 1920×1080 всё ещё №1, но только 21% глобально. А 1536×864 — это скрытый второй Full-HD класс (тот же 1920×1080 ноут при Windows-скейле 125%), ещё 9%.

На мобилке старый baseline iPhone 375px мёртв. Новый центр тяжести — 390–414 CSS px в мире, и 393 px в Испании, где iPhone 15/16 Pro уже обогнал всё остальное.

01 · ЕДИНСТВЕННАЯ ТАБЛИЦА, КОТОРАЯ НУЖНА

Восемь viewport tiers, которые покрывают всё

Протестируй макет на этих 8 ширинах — и для реальных посетителей 2026 года всё будет работать.

Tier
CSS viewport
Типовое устройство
Доля
Small phone
360 px
Samsung Galaxy A/S, Xiaomi Redmi, Android mid
15–20%
Standard iPhone
390 / 393 px
iPhone 12–16 base & Pro
12–15%
Large phone
412–414 px
iPhone 11/XR legacy, Pixel, Galaxy Ultra
~15%
Pro Max
430 / 440 px
iPhone Plus / Pro Max
3–5%
Tablet portrait
768–834 px
iPad mini, iPad 10.9", iPad Pro 11", Tab S9
5–7%
Small laptop
1024–1280 px
iPad Pro 12.9" landscape, 1366×768 ноуты
10–12%
Mainstream
1440–1536 px
FHD ноут @ 125% скейл, MacBook 14/16"
~15%
Full-HD+
1903–2543 px
1920×1080 native, QHD, 4K scaled
15–20%
Практический набор breakpoints

640 / 768 / 1024 / 1280 / 1536 px (совместимо с Tailwind и Bootstrap), опционально 1920 px для дашбордов. Max-width контента — 1440 px, колонка текста — ~72 ch (720 px).

/* Tailwind-совместимо */ sm: 640px /* большие телефоны */ md: 768px /* планшеты портрет */ lg: 1024px /* планшеты landscape, малые ноуты */ xl: 1280px /* ноутбуки */ 2xl: 1536px /* десктопы (1920@125%) */
02 · ГЛОБАЛЬНАЯ КАРТИНА

Все устройства — top 6 по миру, Европе и Испании

Данные StatCounter, Февраль 2026. Европа и Испания заметно десктопнее и iPhone-нее мира в среднем: Full-HD класс (1920×1080 + 1536×864) в Европе достигает ~20% против 13% в мире.

All devices — Feb 2026gs.statcounter.com
# Worldwide Europe Spain
1 1920×1080 — 8.94% 1920×1080 — 13.98% 1920×1080 — 10.70%
2 414×896 — 6.19% 414×896 — 7.16% 414×896 — 6.25%
3 360×800 — 5.90% 1536×864 — 6.16% 393×873 — 5.99%
4 1280×1200* — 5.56% 384×832 — 4.68% 1536×864 — 5.46%
5 1536×864 — 3.78% 390×844 — 4.51% 360×800 — 5.44%
6 390×844 — 3.59% 360×780 — 3.07% 384×832 — 4.94%

* Глобальный бакет 1280×1200 почти наверняка boт/headless-браузер — дискаунтим.

03 · МОБИЛЬНЫЙ ТРАФИК

Испания уже живёт на iPhone 15/16 Pro

Среди mobile-only трафика Испания — первый крупный рынок, где iPhone 15/16 Pro viewport (393×873) обогнал всё остальное. Сигнал что флагманский refresh в Западной Европе идёт быстрее Азии и ЛатАма.

Mobile resolution — Mar 2026statcounter mobile
# Worldwide Europe Spain
1 414×896 — 12.43% 414×896 — 15.00% 393×873 — 11.25%
2 360×800 — 9.58% 390×844 — 9.49% 414×896 — 10.02%
3 390×844 — 6.81% 384×832 — 6.96% 360×800 — 9.08%
4 384×832 — 4.42% 393×873 — 5.68% 390×844 — 7.20%
5 393×873 — 4.15% 360×800 — 5.56% 384×832 — 6.25%
6 360×780 — 3.49% 360×780 — 5.44% 360×780 — 3.80%
Испания — ключевой инсайт

Три iPhone viewport'а (414, 390, 393) уже дают ~28.5% испанского мобильного трафика. Android 360-px класс (360×800 + 360×780) — всего ~12.9%. В мире пропорция обратная.

Бренды телефонов — Испания реально три-way

Xiaomi в Испании держит долю в 2 раза больше чем в среднем по Европе. Данные StatCounter Feb 2026:

Apple — Spain
28.80%
Samsung — Spain
26.75%
Xiaomi — Spain
22.54%
Apple — Europe
38.30%
Samsung — Europe
31.71%
Xiaomi — Europe
10.29%

iPhone модели → CSS viewport (portrait)

Counterpoint Q4 2025 поставил 7 iPhone'ов в глобальный топ-10. Их viewport'ы укладываются тесно:

iPhone viewportsyesviz.com · Apple dev docs
Модель CSS viewport Физический DPR
iPhone SE 2/3 375×667 750×1334 2
iPhone 12/13/14 + Pro 390×844 1170×2532 3
14 Pro / 15 / 15 Pro / 16 / 16e 393×852 1179×2556 3
14/15/16 Plus & Pro Max 430×932 1290×2796 3
16 Pro / 17 / 17 Pro 402×874 1206×2622 3
16/17 Pro Max 440×956 1320×2868 3
Ключевой факт про Samsung

Почти все Samsung — включая свежие флагманы S22/S23/S24/S25 base, A15–A55 — отдают 360 CSS px в portrait. Макеты, которые ломаются на 360 px, ломаются для огромной доли юзеров.

04 · ДЕСКТОП

Full HD всё ещё побеждает, но 1536×864 — скрытый челленджер

StatCounter desktop Mar 2026 (ноуты + мониторы вместе). Самый частый реальный CSS viewport — ~1519 px, не 1920. Потому что Windows 11 по дефолту ставит скейл 125%.

Desktop resolution — Mar 2026statcounter desktop
Resolution Global Europe Spain Note
1920×1080 21.16% 27.80% 25.07% 22–24" монитор, ноут @ 100%
1536×864 9.22% 12.21% 11.34% FHD ноут @ 125% Windows
1366×768 7.05% 5.45% 7.64% Бюджет/старые ноуты
1280×720 4.06% 4.24% 3.83% Очень старые ноуты
2560×1440 3.73% 4.74% 3.70% 27" QHD мониторы
1440×900 3.29% 3.22% Legacy 19", старый MacBook Air
Full-HD класс (1920 + 1536)

Вместе дают ~30% глобально и ~40% в Европе — больше чем все остальные тиры вместе взятые.

Исторический тренд 2015–2026

Эволюция desktop разрешенийstatcounter historical
Год 1920×1080 1366×768 2560×1440 4K reported
2015 (peak)~17%~28.5%<1%<0.3%
2017~17%~27%~1%~0.4%
2020 (crossover)~24%~20%~2.0%~0.8%
2023~22%~9–10%~2.8%~1.3%
Mar 202621.16%7.05%3.73%~1.5–2%

Вывод: 1366×768 потерял ~2/3 доли с 2015. 1920×1080 вырос до ~22% и встал на плато. Весь рост с 2020 ушёл в 1536×864 (скейленные FHD ноуты) и 2560×1440.

Про 4K и "большие" разрешения

Reported 4K — только ~1.5–2%, потому что большинство 4K-юзеров сидят на Windows скейле 150–200% и браузер отдаёт им 1920×1080 или 2560×1440. Реальное 4K распространение по IDC — ~8–10%. Только ~15% desktop-сессий шире 1440 px, меньше 5% — шире 1920 px.

05 · ПЛАНШЕТЫ

iPad — половина рынка и он задаёт breakpoints

StatCounter Mar 2026 tablet vendor share: Apple 51.5% мир / 46.8% Европа, Samsung 26% / 31%, Amazon 6%. iPadOS = 55.9% всего планшетного web-трафика.

Tablet CSS resolutionsstatcounter tablet
Resolution Global Europe Spain Device
768×1024 10.48% 16.67% 10.43% Legacy iPad, iPad mini 3–5
800×1280 7.88% 9.12% 11.90% Samsung Tab A, 10" Android
1280×800 6.99% 8.92% 11.58% Тот же Android, landscape
810×1080 6.58% 10.78% 3.93% iPad 10.2" (9th gen)
820×1180 5.90% 8.38% 3.76% iPad 10.9" / Air / 10–11th gen
Испания — нестандартно

На планшетах Испания более Android чем Европа в среднем (Samsung Tab лидирует). Это обратная ситуация по сравнению с телефонами. Учитывай при тестировании.

06 · DPR И ASPECT RATIOS

Почему 3x изображения — обязательны

Современные телефоны кардинально выше старых 16:9. iPhone X+ = 19.5:9, большинство Android = 20:9. iPad остался 3:4, Android-планшеты — 16:10.

iPhone / Samsung Galaxy
DPR 3
Все current iPhone, Galaxy S/A с FHD+
iPad / MacBook Retina
DPR 2
Все iPad'ы, все Retina Mac'и
Budget Android
2.63 / 2.75
Xiaomi Redmi, фрагментированные значения
Практика

Hero 400 px на iPhone 16 Pro Max = 1200 физических пикселей. Без 3x варианта — видно мыло. Используй srcset с width-дескрипторами (480w, 960w, 1440w), а не density — тогда fractional DPR у Android отработают корректно.

Hero высоты на телефонах

iPhone 12–16 base = 390×844. Android S-series = 360×780. 100vh на таком экране — огромный hero. Используй min(80vh, 600px) для hero-секций.

07 · ЧТО ДЕЛАТЬ В 2026

Три вывода, которые меняют подход к CSS

Если бы выбирал три правила — это они.

01

Тестируй "comfortable desktop" на 1519 px, а не на 1920

FHD ноут @ Windows скейл 125% = viewport 1519 px. Это самая частая реальная ширина на десктопе. Если макет красив только на 1920 native — он выглядит неэффективно для большинства юзеров.

02

360 px — это MUST, не "edge case"

Samsung Galaxy S/A + Xiaomi Redmi = огромная доля мобильного трафика в Испании и Европе. Они все отдают 360 CSS px. Горизонтальный скролл на 360 — провал.

03

Мобильная фрагментация выросла — используй fluid

Ladder 360/375/390/393/402/412/414/430/440 — больше не выбирай один target width. clamp() для типографики, container queries для компонентов в разных viewport'ах.

04

Потолок контента — 1440 px

Только ~15% desktop-сессий шире 1440 px, меньше 5% — шире 1920. Кап контент на 1440, фон растягивай edge-to-edge. Растягивать лэйаут в ultrawide — плохая инвестиция.

08 · CHEAT SHEET

Набор для копирования в проект

/* === Tailwind config / CSS variables === */ /* Breakpoints */ --bp-sm: 640px; /* large phone */ --bp-md: 768px; /* tablet portrait */ --bp-lg: 1024px; /* tablet landscape / small laptop */ --bp-xl: 1280px; /* mainstream laptop */ --bp-2xl: 1536px; /* desktop (FHD @ 125%) */ /* Content caps */ --content-max: 1440px; --text-max: 72ch; /* Test on these viewports */ /* 360, 390, 393, 414, 430, 768, 820, 1024, 1280, 1519, 1920 */ /* Images — always include 3x */ <img srcset="hero-480.jpg 480w, hero-960.jpg 960w, hero-1440.jpg 1440w"> /* Hero heights */ height: min(80vh, 600px);