Для грамотной разработки дизайна макета необходимо иметь четкое представление о фактических разрешениях устройства во Viewport т.к. они отличаются от заявленных производителем разрешений экранов смартфонов.
Мы подготовили для Вас таблицу с разрешениями экранов и фактическим разрешением устройства во Вьюпорте (viewport) — это видимая часть окна браузера (мобильного или десктопного).
Размеры и разрешения экранов для устройств Android
Основные разрешения экрана во вьюпорте браузера для устройств 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
Основные разрешения экрана во вьюпорте браузера для устройств 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. Данный размер является наиболее целесообразным для использования и гарантирует корректное отображение всех элементов дизайна.