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

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

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

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

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

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

УстройствоРазрешение дисплеяViewport
Samsung Galaxy Note 91440 x 2960360 x 740
Samsung Galaxy Note 52560 ×1440480 x 853
Samsung Galaxy S81440 x 2960360 x 740
Samsung Galaxy S9+2960×1440320 x 658
Samsung Galaxy S III1280×720360 x 640
Samsung Galaxy A51 / 712600×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 ×1440414 x 736
iPhone SE1440 x 2960375 x 667
iPhone X2436×1125375 x 812
iPhone XR1792×828414 x 896
iPhone 12 Pro2340×1080390 x 844

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

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

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

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