Для грамотной разработки дизайна макета необходимо иметь четкое представление о фактических разрешениях устройства во Viewport т.к. они отличаются от заявленных производителем разрешений экранов смартфонов.
Мы подготовили для Вас таблицу с разрешениями экранов и фактическим разрешением устройства во Вьюпорте (viewport) — это видимая часть окна браузера (мобильного или десктопного).
Размеры и разрешения экранов для устройств Android
Основные разрешения экрана во вьюпорте браузера для устройств Android следующие:
| Устройство | Разрешение дисплея | Viewport |
| Samsung Galaxy Note 9 | 1440 x 2960 | 360 x 740 |
| Samsung Galaxy Note 5 | 2560 x 1440 | 480 x 853 |
| Samsung Galaxy S8 | 1440 x 2960 | 360 x 740 |
| Samsung Galaxy S9+ | 2960 x 1440 | 320 x 658 |
| Samsung Galaxy S III | 1280 x 720 | 360 x 640 |
| Samsung Galaxy A51 / 71 | 2600 x 1440 | 412 x 914 |
| Google Pixel 2 XL | 1440 x 2560 | 411 x 823 |
| Google Pixel 2 | 1080 x 1920 | 411 x 731 |
Обобщая данные таблицы можно сделать вывод:
- Минимальное разрешение для портретной ориентации мобильных устройств на базе Adndroid — 320 px
- Минимальное разрешения для альбомной ориентации мобильных устройств на базе Adndroid — 640 px
Размеры и разрешения экранов для устройств iOS
Основные разрешения экрана во вьюпорте браузера для устройств iOS следующие:
| Устройство | Разрешение дисплея | Viewport |
| iPhone 6/7/8/ | 1440 x 2960 | 375 x 667 |
| iPhone 6/7/8/ Plus | 2560 x 1440 | 414 x 736 |
| iPhone SE | 1440 x 2960 | 375 x 667 |
| iPhone X | 2436 x 1125 | 375 x 812 |
| iPhone XR | 1792 x 828 | 414 x 896 |
| iPhone 12 Pro | 2340 x 1080 | 390 x 844 |
Обобщая данные таблицы можно сделать вывод:
- Минимальное разрешение для портретной ориентации мобильных устройств на базе Adndroid — 375 px
- Минимальное разрешения для альбомной ориентации мобильных устройств на базе Adndroid — 667 px
Хорошим пользовательским опытом будет ориентация на самые маленькие разрешения viewport, но многие разработчики игнорируют устаревшие устройства и ориентируются на ширину 335. Данный размер является наиболее целесообразным для использования и гарантирует корректное отображение всех элементов дизайна.
Размеры и разрешения экранов компьютеров и ноутбуков
Основные разрешения экрана во вьюпорте браузера для Desktop устройств:
| Популярность устройства | Устройство | Viewport |
| 1 | Стандартный экран Full HD | 1920 x 1080 |
| 2 | Ноутбуки | 1680×1050 |
| 5 | Ноутбуки Apple (Retina) и других производителей | 1536 x 864 |
| 3 | Ноутбуки Apple (Retina) и других производителей | 1440 x 900 |
| 4 | Ноутбуки Apple (Retina) и других производителей | 1366 x 768 |
| 6 | Ноутбуки Apple (Retina) и других производителей | 1280 x 720 |
Важно учитывать, что заявленное производителем фактическое разрешение (плотность пикселей) мониторов не всегда соответствует разрешению устройства во Viewport. Данная тенденция хорошо прослеживается на мониторах apple. Хорошим пользовательским опытом будет ориентация на разрешения viewport 1200px x 720 px. Данном случае ваш сайт будет отображаться корректно практически на всех устройствах, без необходимости настройки дополнительных контрольных точек. С учетом постоянного уменьшения использования устройств с данным разрешением можно так же использовать разрешение 1366px.
Адаптивные контрольные точки для планшета и мобильного устройства
Если вы задаете собственные точки останова для вашего сайта или приложения рекомендуем использовать следующие значения.
Адаптивная контрольная точка — ширина экрана, при которой веб-сайт или приложение должны адаптировать свой макет и дизайн. Для типовых проектов достаточно задать только две контрольные точки для мобильного устройства и для планшета. Поскольку мобильные экраны и планшеты бывают разных размеров и разрешений, контрольные точки определяют точки, при которых контент и макет должны перестраиваться для размещения на экранах меньшего размера.
Рекомендуем использовать следующие значения точек останова (Breakpoints) для вашего сайта:
Ширина макета сайта — 1200 px (или 1300 px)
Точки останова планшета (Tablet Breakpoints) – 921 px
Мобильные контрольные точки (Mobile Breakpoints) – 544 px
// Мобильные устройства
@media (min-width: 544px)
// Планшеты
@media (min-width: 991px)
// Размер контейнера 1200px
@media (min-width: 1201px)
Но не смотря на данные значения ориентироваться при разработке дизайна вам следует на минимальные рекомендуемые разрешения устройств во viewport, чтобы избежать проблем с версткой. И не забудьте протестировать и проверить макет на разных устройствах и размерах экрана, чтобы обеспечить адаптивность и хороший пользовательский опыт.
Данные размеры являются рекомендованными, вы безусловно можете использовать и большую ширину макета сайта, но не забудьте добавить дополнительные контрольные точки для устройств с меньшими экранами или используйте относительные размеры при верстке сайта (%, em и т.д.)
Адаптивные контрольные точки (брейкпойнты) Bootstrap
В Bootstrap (Бутстрап) заложена концепция разработки mobile-first (сначала мобильная версия), для создания контрольных точек используются медиа-запросы @media. Данные медиа запросы ориентируются на минимальную ширину вьюпорта (зоны просмот ра).
Базовые контрольные точки, которые используются в Bootstrap:
// Малые девайсы
@media (min-width: 576px)
// Средние девайсы («планшеты» > 768px)
@media (min-width: 768px)
// Большие девайсы (Ноутбуки и десктопы > 991px)
@media (min-width: 991px)
// Стационарные ПК и большие мониторы (> 1200px)
@media (min-width: 1200px)