Размеры разрешений экранов
- Responsive Design Testing Table — Google таблица для тестирования
- http://ru.screenresolution.org/
- https://gs.statcounter.com/screen-resolution-stats
- http://www.w3schools.com/browsers/browsers_display.asp
По типам устройств:
См. также:
- Popular Phones & Tablets — yesviz.com
- https://ios-resolution.com/ — iOS Resolution
- http://iosres.com/ — iOS Quick Reference for iPhone, iPad, and Apple Watch
- https://docs.adobe.com/content/help/en/target/using/experiences/vec/mobile-viewports.html — Mobile Viewports for Responsive Experiences
- https://viewportsizer.com/devices/
- Viewport, resolution, screen size and DPI for the most popular smartphones
- http://top.bigmir.net/global/resolution
- https://gs.statcounter.com/screen-resolution-stats/all/ukraine
По устройствам:
- Desktop / Tablet / Mobile — gs.statcounter.com
- https://f.ua/shop/zhk-monitory/ — разрешения популярных в Украине мониторов: слева список «Максимальное разрешение»
- Розетка — iPhone (см. слева фильтр «Серия»)
По состоянию на июль 2020 приоритетность разрешений, в которых нужно тестировать сайты.
Популярность по данным статистики по всему миру:
- gs.statcounter.com — проценты приведены по каждой группе устройств отдельно (десктопы, планшеты, мобильники)
- screenresolution.org — проценты суммарные по всем устройствам вместе (брались в том случае, если соответствующего разрешения не было в первой статистике по группам устройств).
Значком ⭐ помечены устройства, которые есть в Chrome Inspector.
| Важ- ность |
Screen Resolution |
Viewport | Статистика | Описание |
|---|---|---|---|---|
| 1 | 1920x1080 | 1920x935 | 21% | Full HD — 2-е место по распространенности 1-е по перспективности: большинство современных мониторов и ноутбуков.
|
| 1600x900 | 1600x750 | 7% | 3-е место по популярности среди современных ноутбуков.
| |
| 1536x864 | 1536x685 | 7% |
| |
| 1440x900 | 1440x755 | 7% | Laptop with HiDPI screen ⭐, MacBook Pro 15″ (2014-2018), MacBook Air 13″ (2014-2017), старые 19″ мониторы | |
| 2 | 1366x768 | 1360x623 | 25% | 1-е место по распространенности: бюджетные 18,5″ мониторы и 15″ ноутбуки, старые (2014-2015) MacBook Air 11″
|
| 3 | 1280x800 | 1280x655 | 10% |
|
| 1024x768 | 1024x623 | 3% | Старые 15″ мониторы (и планшеты iPad горизонтально) |
| Важ- ность |
Screen Resolution |
Статистика | Описание |
|---|---|---|---|
| 1024x1366 | 3% | iPad Pro ⭐ 12.9″ | |
| 834x1112 | 5% |
| |
| 2 | 800x1280 | 10% | Nexus 10 ⭐, Kindle Fire HDX ⭐, Android 7″-10″ |
| 1 | 768x1024 | 58% | iPad ⭐: 2017, 2018, Air, Air 2, Gen 1/2/3/4, Mini 1/2/3/4, Pro 9.7 |
| 600x960 | 9% |
|
| Важ- ность |
Screen Resolution |
Статистика | Описание |
|---|---|---|---|
| 480x854 | 0.02% |
| |
| 2 | 414x736 | 19% |
|
| 393x786 | 3% |
| |
| 384x640 | 0.02% | Nexus 4 ⭐, LG Optimus L70 ⭐ | |
| 3 | 375x667 | 12% |
|
| 1 | 360x640 | 40% |
|
| 4 | 320x568 | 3% |
|
| 240x320 | 0.04% | JioPhone 2 ⭐ |
По данным http://ru.screenresolution.org/ на июль 2020 года.
На сайте https://yesviz.com/ находим модель телефона и проверяем Viewport.
Пример: у клиента Samsung A50.
Физическое разрешение, которое указывает производитель: 1080 x 2340 PX
Если его указать в Хроме или Фотошопе, получается очень большой экран. Это из-за того, что плотность пикселей у этого Самсунга — 403 ppi, что значительно больше, чем обычное 72 ppi мониторов.
Смотрим параметры Samsung A50 здесь: https://yesviz.com/devices/a50/
Viewport: 412 x 892 PX - это то, что нужно указывать в Хроме и получается реалистично.
Разрешение экрана, которое видно в статистике — это чистый размер экрана без учета таких элементов интерфейса, как:
- заголовок окна браузера,
- панель с адресом сайта,
- панель закладок,
- полоса прокрутки,
- панель задач операционной системы.
Для корректного тестирования сайта в сервисах, которые имитируют разные разрешения, нужно вычитать из размера разрешения суммарный размер элементов интерфейса.
-
Mozilla Firefox -
Opera -
Microsoft Edge -
Internet Explorer 11
Если в Windows стоит масштаб 125%, то размеры элементов интерфейса тоже увеличиваются. На примере Chrome:
| Браузер | Высота интерфейсных элементов |
Ширина интерфейсных элементов |
|---|---|---|
| Google Chrome | 143 | 17 |
| Mozilla Firefox | 142 | 16 |
| Opera | 141 | 55 |
| Microsoft Edge | 145 | 16 |
| Internet Explorer 11 | 148 | 16 |
| Google Chrome 125% | 179 | 21 |
Исходя из популярности браузеров, рекомендуем ориентироваться на отнимаемый размер элементов интерфейса:
- нормальный масштаб — 145 пикселей по высоте (Edge) × 17 пикселей по ширине (Chrome)
- масштаб 125% — 179 пикселей по высоте × 21 пиксель по ширине
Соответственно, если нужно сымитировать просмотр сайта на определенном размере экрана, нужно указывать следующие размеры ViewPort (для простоты — без учета полосы прокрутки):
| Разрешение | ViewPort | Комментарий |
|---|---|---|
| 1920×1080 | 1920×935 | |
| 1600×900 | 1600×755 | |
| 1536×864 | 1536×685 | 1920×1080 с масштабом 125% |
| 1440×900 | 1440×755 | |
| 1366×768 | 1366×623 | |
| 1280×1024 | 1280×879 |
⭐ — такое устройство есть в Google Chrome Inspector;
🖐 — устройство с этим разрешением нужно добавлять вручную.
<picture>
<!--------------------------------------------------------------------------->
<!-- Телефоны -->
<!--------------------------------------------------------------------------->
<!-- 240x320 — 0.04% — JioPhone 2 ⭐ -->
<!-- нет -->
<!-- 320x480 — 0,02% — iPhone 4 ⭐ -->
<!-- 320x568 — 3% — iPhone 5 ⭐ (c 320x533 до 320x570) -->
<source media="(max-width: 320px)"
srcset="/img/w320/picture.png,
/img/w320/picture@2x.png 2x">
<!-- 360x640 — 40% — Galaxy S5 ⭐ (c 360x567 до 360×800) -->
<!-- 375x667 — 12% — iPhone 6 ⭐ (до 375x812) -->
<source media="(max-width: 375px)"
srcset="/img/w375/picture.png,
/img/w375/picture@2x.png 2x">
<!-- 384x640 — 0.02% — Nexus 4 ⭐ -->
<!-- 393x786 — 3% — Redmi Note 5 🖐 (до 393x851) -->
<!-- 414x736 — 19% — iPhone 6/7/8 Plus ⭐ (c 412x660 до 414x896) -->
<source media="(max-width: 414px)"
srcset="/img/w414/picture.png,
/img/w414/picture@2x.png 2x">
<!--------------------------------------------------------------------------->
<!-- Планшеты -->
<!--------------------------------------------------------------------------->
<!-- 600x960 — 9% — Nexus 7 ⭐ (до 600x1024)-->
<source media="(orientation: portrait) and (max-width: 600px)"
srcset="/img/w600/picture.png,
/img/w600/picture@2x.png 2x">
<!-- 768x1024 — 58% — iPad ⭐ -->
<source media="(orientation: portrait) and (max-width: 768px)"
srcset="/img/w768/picture.png,
/img/w768/picture@2x.png 2x">
<!-- 800x1280 — 10% — Nexus 10 ⭐ -->
<!-- 834x1112 — 5% — iPad Pro 10.5″/11″ 🖐 (до 834x1194) -->
<source media="(orientation: portrait) and (max-width: 834px)"
srcset="/img/w834/picture.png,
/img/w834/picture@2x.png 2x">
<!-- 1024x1366 — 3% — iPad Pro ⭐ 12.9″ -->
<source media="(orientation: portrait) and (min-width: 1024px)"
srcset="/img/w1024/picture.png,
/img/w1024/picture@2x.png 2x">
<!--------------------------------------------------------------------------->
<!-- Десктопы -->
<!--------------------------------------------------------------------------->
<!--
Для телефонов и планшетов предполагаем 100% ширину картинки и поэтому
ориентируемся на ШИРИНУ viewport устройства, а у десктопов узкое место —
высота экрана, поэтому ориентируемся на ВЫСОТУ viewport за вычетом элементов
интерфейса и высоты navbar. Т.е. величину max-height нужно корректировать
в зависимости от вашего дизайна.
-->
<!-- 1280x720 — 4% -->
<source media="(orientation: landscape) and (max-height: 720px)"
srcset="/img/h720/picture.png">
<!-- 1366x768 — 25% — 1-е место по распространенности: бюджетные 18,5″ мониторы
и 15″ ноутбуки, старые MacBook Air 11″ -->
<source media="(orientation: landscape) and (max-height: 768px)"
srcset="/img/h768/picture.png">
<!-- 1280x800 — 3% — MacBook 12″/Pro 13″/Air 13″ -->
<source media="(orientation: landscape) and (max-height: 800px)"
srcset="/img/h800/picture.png,
/img/h800/picture@2x.png 2x">
<!-- 1536x864 — 7% — Ноутбуки 13″-15″ с разрешением Full HD 1920x1080
и настройкой в Windows 125% увеличения -->
<source media="(orientation: landscape) and (max-height: 864px)"
srcset="/img/h864/picture.png,
/img/h864/picture@2x.png 2x">
<!-- 1440x900 — 7% — MacBook Pro 15″, MacBook Air 13″, старые 19″ мониторы -->
<!-- 1600x900 — 4,6% — 3-е место по популярности среди современных ноутбуков -->
<source media="(orientation: landscape) and (max-height: 900px)"
srcset="/img/h900/picture.png,
/img/h900/picture@2x.png 2x">
<!-- 1536x960 — 0.07% — MacBook Pro 16″ 2019 -->
<source media="(orientation: landscape) and (max-height: 960px)"
srcset="/img/h960/picture.png,
/img/h960/picture@2x.png 2x">
<!-- 1280x1024 — 3% -->
<!-- 1920x1080 — 20% — Full HD: мониторы от 21,5″ до 27″ и ноутбуки от 13″ до 17″.
2-е место по распространенности 1-е по перспективности: большинство современных
мониторов и ноутбуков. -->
<source media="(orientation: landscape) and (max-height: 1080px)"
srcset="/img/h1080/picture.png,
/img/h1080/picture@2x.png 2x">
<!-- 1920x1200 — 1% — мониторы 24″-25″ -->
<source srcset="/img/h1200/picture.png,
/img/h1200/picture@2x.png 2x">
<img class="img-fluid" src="/img/h1080/picture.png">
</picture>
См. Media
Тестирование поведения сайта при разных разрешениях:
Несколько на одной картинке:
- http://ami.responsivedesign.is/ — показывает живой сайт на одной картинке в 4 устройствах
Несколько на одной странице:
- http://www.responsinator.com/ — показывает на одной странице сайт в 5 самых популярных телефонах и планшетах, сразу вертикально и горизонтально. Есть bookmarklet. Есть ссылка вида: http://www.responsinator.com/?url=https://beta.zina.design/
- http://responsive.pixeltuner.de/ — показывает на одной странице сайт в 5 самых популярных телефонах и планшетах. Есть ссылка вида http://responsive.pixeltuner.de/?s=https%3A%2F%2Fbeta.zina.design%2F#mobile480
Универсальные:
- http://lab.maltewassermann.com/viewport-resizer/ — bookmarklet
- https://responsivedesignchecker.com/ — есть ссылка с параметрами вида: https://responsivedesignchecker.com/checker.php?url=https%3A%2F%2Fbeta.zina.design%2F&width=1400&height=700. Размеры бОльшие, чем имеющийся экран, показывает в масштабированном виде.
- http://responsivetesttool.com/ — ссылки нет. Размеры бОльшие, чем имеющийся экран, показывает в реальном масштабе, с прокруткой.
- https://designmodo.com/responsive-test/ — ссылки нет
- https://www.duplichecker.com/screen-resolution-simulator.php — ссылки нет
На реальном железе и софте:
- https://www.browserstack.com/responsive?ref=lf-responsive-design-start-resposnive-design-testing-top — платный, дорогой, но на реальных устройствах. Бесплатному триальному аккаунту дается 30 минут по 1 минуте на дестопы и 30 минут на мобильники.
В VirtualBox:
| 1920×1080 | VBoxManage controlvm "Windows 10" setvideomodehint 1920 1080 32 |
| 1680×1050 | VBoxManage controlvm "Windows 10" setvideomodehint 1680 1050 32 |
| 1600×900 | VBoxManage controlvm "Windows 10" setvideomodehint 1600 900 32 |
| 1536×864 | VBoxManage controlvm "Windows 10" setvideomodehint 1536×864 32 |
| 1366×768 | VBoxManage controlvm "Windows 10" setvideomodehint 1366 768 32 |
| 1280×1024 | VBoxManage controlvm "Windows 10" setvideomodehint 1280 1024 32 |
| 1024×768 | VBoxManage controlvm "Windows 10" setvideomodehint 1024 768 32 |
| 800×600 | VBoxManage controlvm "Windows 10" setvideomodehint 800 600 32 |
| 360×640 | VBoxManage controlvm "Windows 10" setvideomodehint 360 640 32 |
Ширина контейнера, в который помещается содержимое сайта:
- основной макет — 1170 px (экраны больше 1200 px)
- для средних десктопов — 970 px (экраны от 992 до 1199 px)
- для планшетов — 750 px (экраны от 768 до 991 px)
- для телефонов — 288 px («резиновый» макет от 288 до 750 px для экранов от 305 до 767 px)
Подробнее см. Bootstrap
Дизайн сайта нужно делать с учетом, что его будут смотреть на таких устройствах:
- Нетбуки, ноутбуки и мониторы — от 10" до 27", от 1024×600 до 2560x1440 пикселей
- Планшеты — от 7" до 8,9", от 533×853 до 800×1280 пикселей
- Мобильники — от 320×240 до 360×640 пикселей
Апрель 2018
По данным screenresolution.org
| Размер | Популярность | Пропорция |
| 1366x768 | 17.53% | 16:9 (1,78) |
| 1920x1080 | 13.23% | 16:9 (1,78) |
| 360x640 | 10.04% | 16:9 (1,78) |
| 1280x1024 | 4.35% | 5:4 (1,25) |
По данным w3schools.com
| Размер | Популярность | Пропорция |
| 1366x768 | 34% | 16:9 (1,78) |
| 1920x1080 | 18% | 16:9 (1,78) |
| 1280x1024 | 4% | 5:4 (1,25) |
| 1280x800 | 3% | 8:5 (16:10, 1,6) |
| 1024x768 | 2% | 4:3 (1,33) |
Вывод
1. Главный дизайн нужно рисовать под разрешение 1280×800 пикселей — это 13" ноутбук и примерно 80 % пользователей, включая пользователей с бОльшими размерами экрана. При этом учитывать, что дизайн (фон) должен смотреться хорошо на размерах 1920х1200 (24", 15% пользователей) и вплоть до 2560x1440 (27", 1 % пользователей).
2. После главного дизайна делать уменьшенные версии в такой последовательности:
- горизонтальный 1024×768 — для 10 % пользователей с 10" и 12" нетбуками и старыми мониторами, а также для планшетов iPad, Kindle Fire HD, Samsung Galaxy Tab
- вертикальный 533x853 — для всех планшетов
- вертикальный 320x480 — для iPhone и Андроидов