Размеры viewport популярных устройств
Это каталог пресетов FlexViewport: ширина и высота области просмотра в CSS-пикселях. Выберите размер, чтобы увидеть рекомендации по проверке и сравнить обе ориентации.
iPhone SE →
- Исходный viewport
- 375 × 667 CSS px
- Portrait
- 375 × 667 CSS px
- Landscape
- 667 × 375 CSS px
- Категория
- iPhone
- DPR пресета (справочно)
- 2
iPhone 14 →
- Исходный viewport
- 390 × 844 CSS px
- Portrait
- 390 × 844 CSS px
- Landscape
- 844 × 390 CSS px
- Категория
- iPhone
- DPR пресета (справочно)
- 3
iPhone 15 Pro →
- Исходный viewport
- 393 × 852 CSS px
- Portrait
- 393 × 852 CSS px
- Landscape
- 852 × 393 CSS px
- Категория
- iPhone
- DPR пресета (справочно)
- 3
iPhone 15 Pro Max →
- Исходный viewport
- 430 × 932 CSS px
- Portrait
- 430 × 932 CSS px
- Landscape
- 932 × 430 CSS px
- Категория
- iPhone
- DPR пресета (справочно)
- 3
Pixel →
- Исходный viewport
- 412 × 915 CSS px
- Portrait
- 412 × 915 CSS px
- Landscape
- 915 × 412 CSS px
- Категория
- Android
- DPR пресета (справочно)
- 2.625
Galaxy →
- Исходный viewport
- 360 × 780 CSS px
- Portrait
- 360 × 780 CSS px
- Landscape
- 780 × 360 CSS px
- Категория
- Android
- DPR пресета (справочно)
- 3
iPad Mini →
- Исходный viewport
- 768 × 1024 CSS px
- Portrait
- 768 × 1024 CSS px
- Landscape
- 1024 × 768 CSS px
- Категория
- Планшет
- DPR пресета (справочно)
- 2
iPad Pro →
- Исходный viewport
- 1024 × 1366 CSS px
- Portrait
- 1024 × 1366 CSS px
- Landscape
- 1366 × 1024 CSS px
- Категория
- Планшет
- DPR пресета (справочно)
- 2
Laptop →
- Исходный viewport
- 1366 × 768 CSS px
- Portrait
- 768 × 1366 CSS px
- Landscape
- 1366 × 768 CSS px
- Категория
- Ноутбук / desktop
- DPR пресета (справочно)
- 1
Desktop →
- Исходный viewport
- 1920 × 1080 CSS px
- Portrait
- 1080 × 1920 CSS px
- Landscape
- 1920 × 1080 CSS px
- Категория
- Ноутбук / desktop
- DPR пресета (справочно)
- 1
Что такое CSS viewport?
Layout viewport — область, относительно которой браузер рассчитывает верстку и условия media queries по ширине. В tester её размеры задаёт iframe. CSS-пиксели не следует путать с физическими пикселями дисплея; DPR указан только как справочная информация о пресете.
Почему одного iPhone недостаточно?
Один размер может скрыть переполнение на узком экране или неудачное растяжение на широком. Сравните телефон, планшет и desktop, затем проверьте промежуточные ширины. Название пресета не гарантирует точное воспроизведение конкретного браузера: его панели, масштаб и настройки могут менять доступную область.
Когда нужен собственный viewport?
Используйте custom-размеры около места, где меню перестаёт помещаться или карточкам становится тесно. Так можно проверить границу перестроения макета, даже если в каталоге нет устройства с такой шириной. Для ноутбуков и мониторов исходная ориентация горизонтальная; portrait в каталоге показывает переставленные стороны.
Подробнее о CSS: MDN — Viewport concepts