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

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

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

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

Устройство	Разрешение дисплея	Viewport
Samsung Galaxy Note 9	1440 x 2960	360 x 740
Samsung Galaxy Note 5	2560 ×1440	480 x 853
Samsung Galaxy S8	1440 x 2960	360 x 740
Samsung Galaxy S9+	2960×1440	320 x 658
Samsung Galaxy S III	1280×720	360 x 640
Samsung Galaxy A51 / 71	2600×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 следующие:

Устройство	Разрешение дисплея	Viewport
iPhone 6/7/8/	1440 x 2960	375 x 667
iPhone 6/7/8/ Plus	2560 ×1440	414 x 736
iPhone SE	1440 x 2960	375 x 667
iPhone X	2436×1125	375 x 812
iPhone XR	1792×828	414 x 896
iPhone 12 Pro	2340×1080	390 x 844

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

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

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