У актуальных iPhone экраны от 6,1 до 6,9 дюйма, а ширина CSS viewport от 390 до 440 пикселей. У iPhone 18 Pro и iPhone 17 экран 6,3 дюйма и viewport 402 × 874; у iPhone 18 Pro Max и 17 Pro Max экран 6,9 дюйма и viewport 440 × 956; у iPhone 17e экран 6,1 дюйма и viewport 390 × 844. В таблице ниже перечислены все модели вплоть до первого iPhone SE.
Как читать таблицу
- Экран — диагональ в дюймах, как её указывает Apple. У моделей со скруглёнными углами реальная видимая область немного меньше.
- Разрешение — физическое количество пикселей дисплея в портретной ориентации.
- CSS viewport — то, что видит веб-страница в Safari в портретной ориентации при правильном метатеге viewport: разрешение, делённое на плотность пикселей. Именно это число используется в адаптивной вёрстке и медиазапросах.
- Плотность пикселей (DPR) — сколько физических пикселей приходится на один CSS-пиксель по каждой стороне.
Таблица разрешений экранов iPhone (2016–2026)
| Модель | Год | Экран | Разрешение | CSS viewport | Плотность пикселей |
|---|---|---|---|---|---|
| iPhone 18 Pro Max | 2026 | 6,9” | 1320 × 2868 | 440 × 956 | 3 |
| iPhone 18 Pro | 2026 | 6,3” | 1206 × 2622 | 402 × 874 | 3 |
| iPhone 17e | 2026 | 6,1” | 1170 × 2532 | 390 × 844 | 3 |
| iPhone 17 Pro Max | 2025 | 6,9” | 1320 × 2868 | 440 × 956 | 3 |
| iPhone 17 Pro | 2025 | 6,3” | 1206 × 2622 | 402 × 874 | 3 |
| iPhone Air | 2025 | 6,5” | 1260 × 2736 | 420 × 912 | 3 |
| iPhone 17 | 2025 | 6,3” | 1206 × 2622 | 402 × 874 | 3 |
| iPhone 16e | 2025 | 6,1” | 1170 × 2532 | 390 × 844 | 3 |
| iPhone 16 Pro Max | 2024 | 6,9” | 1320 × 2868 | 440 × 956 | 3 |
| iPhone 16 Pro | 2024 | 6,3” | 1206 × 2622 | 402 × 874 | 3 |
| iPhone 16 Plus | 2024 | 6,7” | 1290 × 2796 | 430 × 932 | 3 |
| iPhone 16 | 2024 | 6,1” | 1179 × 2556 | 393 × 852 | 3 |
| iPhone 15 Pro Max | 2023 | 6,7” | 1290 × 2796 | 430 × 932 | 3 |
| iPhone 15 Pro | 2023 | 6,1” | 1179 × 2556 | 393 × 852 | 3 |
| iPhone 15 Plus | 2023 | 6,7” | 1290 × 2796 | 430 × 932 | 3 |
| iPhone 15 | 2023 | 6,1” | 1179 × 2556 | 393 × 852 | 3 |
| iPhone 14 Pro Max | 2022 | 6,7” | 1290 × 2796 | 430 × 932 | 3 |
| iPhone 14 Pro | 2022 | 6,1” | 1179 × 2556 | 393 × 852 | 3 |
| iPhone 14 Plus | 2022 | 6,7” | 1284 × 2778 | 428 × 926 | 3 |
| iPhone 14 | 2022 | 6,1” | 1170 × 2532 | 390 × 844 | 3 |
| iPhone SE (3-го поколения) | 2022 | 4,7” | 750 × 1334 | 375 × 667 | 2 |
| iPhone 13 Pro Max | 2021 | 6,7” | 1284 × 2778 | 428 × 926 | 3 |
| iPhone 13 / 13 Pro | 2021 | 6,1” | 1170 × 2532 | 390 × 844 | 3 |
| iPhone 13 mini | 2021 | 5,4” | 1080 × 2340 | 375 × 812 | 3 |
| iPhone 12 Pro Max | 2020 | 6,7” | 1284 × 2778 | 428 × 926 | 3 |
| iPhone 12 / 12 Pro | 2020 | 6,1” | 1170 × 2532 | 390 × 844 | 3 |
| iPhone 12 mini | 2020 | 5,4” | 1080 × 2340 | 375 × 812 | 3 |
| iPhone SE (2-го поколения) | 2020 | 4,7” | 750 × 1334 | 375 × 667 | 2 |
| iPhone 11 Pro Max | 2019 | 6,5” | 1242 × 2688 | 414 × 896 | 3 |
| iPhone 11 Pro | 2019 | 5,8” | 1125 × 2436 | 375 × 812 | 3 |
| iPhone 11 | 2019 | 6,1” | 828 × 1792 | 414 × 896 | 2 |
| iPhone XS Max | 2018 | 6,5” | 1242 × 2688 | 414 × 896 | 3 |
| iPhone XS | 2018 | 5,8” | 1125 × 2436 | 375 × 812 | 3 |
| iPhone XR | 2018 | 6,1” | 828 × 1792 | 414 × 896 | 2 |
| iPhone X | 2017 | 5,8” | 1125 × 2436 | 375 × 812 | 3 |
| iPhone 8 Plus | 2017 | 5,5” | 1080 × 1920 | 414 × 736 | 3* |
| iPhone 8 | 2017 | 4,7” | 750 × 1334 | 375 × 667 | 2 |
| iPhone 7 Plus | 2016 | 5,5” | 1080 × 1920 | 414 × 736 | 3* |
| iPhone 7 | 2016 | 4,7” | 750 × 1334 | 375 × 667 | 2 |
| iPhone SE (1-го поколения) | 2016 | 4,0” | 640 × 1136 | 320 × 568 | 2 |
* Модели Plus отрисовывают картинку в 1242 × 2208 и уменьшают её до панели 1080 × 1920, поэтому сообщаемая плотность пикселей равна 3, а физическая — примерно 2,6. iPhone 12 mini и 13 mini точно так же отрисовывают viewport шириной 375 px на панели чуть меньшей, чем требовалось бы для 3x.
Источники: страницы технических характеристик Apple для каждой модели (диагональ и разрешение); значения viewport — это разрешение, делённое на плотность пикселей. Новейшие модели сверяйте со страницей характеристик Apple: компания добавляет их каждый год.
Какие ширины viewport реально нужны веб-дизайнеру
Из всех этих моделей для вёрстки важны всего несколько ширин:
| Ширина в CSS | Модели |
|---|---|
| 375 px | SE (2-го и 3-го поколения), 8, модели mini, X/XS/11 Pro |
| 390 px | 12, 13, 14, 16e, 17e |
| 393 px | 14 Pro, 15, 15 Pro, 16 |
| 402 px | 16 Pro, 17, 17 Pro, 18 Pro |
| 414 px | XR, 11, XS Max, 11 Pro Max, 8 Plus |
| 420 px | Air |
| 428–440 px | Модели Plus и Pro Max |
Если раскладка резиново работает от 375 до 440 px, она работает на любом iPhone, проданном за последние восемь лет. Проверьте и 320 px, если хотите подстраховаться на случай старых устройств и увеличенного текста. Обо всём, что между телефонами и шире, читайте в статье о брейкпоинтах для адаптивной вёрстки.
У какого iPhone самый большой и самый маленький экран?
Самые большие экраны у моделей Pro Max с диагональю 6,9 дюйма: iPhone 16 Pro Max, 17 Pro Max и 18 Pro Max. Самый маленький экран в текущем поколении — 6,1 дюйма (iPhone 16e и 17e). Самым маленьким iPhone с современным безрамочным дизайном был iPhone 13 mini с экраном 5,4 дюйма, а самый маленький в этой таблице вообще — первый iPhone SE с экраном 4 дюйма.
Как использовать эти размеры для проверки сайта
Чтобы увидеть сайт на десктопе точно в размере iPhone, нужен не просто узкий экран, а viewport вместе с плотностью пикселей и user agent. Есть два варианта:
- Режим устройства в Chrome DevTools: выберите пресет iPhone или нажмите Edit и добавьте своё устройство с шириной, высотой и плотностью пикселей из таблицы. Подробнее в статье эмулятор мобильных устройств в Chrome.
- Расширение для мобильного просмотра с пресетами iPhone. Mobile View Extension перезагружает вкладку в рамке iPhone с подходящим user agent, размером экрана и плотностью пикселей, а если нужной модели нет, принимает произвольное разрешение.
Оба способа используют движок Chrome. Для поведения, характерного именно для Safari, нужен Xcode Simulator или настоящий iPhone, об этом статья как проверить сайт на iPhone без iPhone.
Частые вопросы
Какой размер viewport у iPhone 17?
402 × 874 CSS-пикселя при плотности пикселей 3, дисплей 6,3 дюйма с разрешением 1206 × 2622. У iPhone 17 Pro и iPhone 18 Pro те же значения.
Под какой размер экрана iPhone делать дизайн?
Делайте резиновую раскладку, которая работает при ширине от 375 до 440 px. В макетах берите 390 или 393 px как типичный iPhone среднего размера, а перед релизом проверяйте 375 и 440 px.
Почему viewport у iPhone меньше, чем разрешение экрана?
Каждый CSS-пиксель рисуется двумя или тремя физическими пикселями по каждой стороне, чтобы текст оставался чётким. Viewport — это разрешение, делённое на эту плотность пикселей. Подробнее в статье что такое viewport.