Основные разрешения (размеры) экранов для адаптивной верстки

Размеры разрешения экранов для адаптивной верстки

Для грамотной разработки дизайна макета необходимо иметь четкое представление о фактических разрешениях устройства во Viewport т.к. они отличаются от заявленных производителем разрешений экранов смартфонов.

Мы подготовили для Вас таблицу с разрешениями экранов и фактическим разрешением устройства во Вьюпорте (viewport) — это видимая часть окна браузера (мобильного или десктопного).

Размеры и разрешения экранов для устройств Android

Основные разрешения экрана во вьюпорте браузера для устройств Android следующие:

УстройствоРазрешение дисплеяViewport
Samsung Galaxy Note 91440 x 2960360 x 740
Samsung Galaxy Note 52560 x 1440480 x 853
Samsung Galaxy S81440 x 2960360 x 740
Samsung Galaxy S9+2960 x 1440320 x 658
Samsung Galaxy S III1280 x 720360 x 640
Samsung Galaxy A51 / 712600 x 1440412 x 914
Google Pixel 2 XL 1440 x 2560 411 x 823
Google Pixel 21080 x 1920 411 x 731

Обобщая данные таблицы можно сделать вывод:

  • Минимальное разрешение для портретной ориентации мобильных устройств на базе Adndroid — 320 px
  • Минимальное разрешения для альбомной ориентации мобильных устройств на базе Adndroid — 640 px

Размеры и разрешения экранов для устройств iOS

Основные разрешения экрана во вьюпорте браузера для устройств iOS следующие:

УстройствоРазрешение дисплеяViewport
iPhone 6/7/8/
1440 x 2960375 x 667
iPhone 6/7/8/ Plus2560 x 1440414 x 736
iPhone SE1440 x 2960375 x 667
iPhone X2436 x 1125375 x 812
iPhone XR1792 x 828414 x 896
iPhone 12 Pro2340 x 1080390 x 844

Обобщая данные таблицы можно сделать вывод:

  • Минимальное разрешение для портретной ориентации мобильных устройств на базе Adndroid — 375 px
  • Минимальное разрешения для альбомной ориентации мобильных устройств на базе Adndroid — 667 px

Хорошим пользовательским опытом будет ориентация на самые маленькие разрешения viewport, но многие разработчики игнорируют устаревшие устройства и ориентируются на ширину 335. Данный размер является наиболее целесообразным для использования и гарантирует корректное отображение всех элементов дизайна.

Размеры и разрешения экранов компьютеров и ноутбуков

Основные разрешения экрана во вьюпорте браузера для Desktop устройств:

Популярность устройстваУстройствоViewport
1Стандартный экран Full HD1920 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)

Прокрутить вверх