Вёрстка под новые айфоны
Адаптивная верстка требует нетривиальных решений и усложняется с выходом новых устройств на рынок. Какие разрешения используются на мобильных телефонах Эппл?
Сводная таблица с разрешениями мобильных устройств Apple
| Модель | Год выпуска | Разрешение | Реальное разрешение | Соотношение сторон | Диагональ | Пикселей на дюйм |
| iPhone 2G | 2007 | 320 × 480 | 320 × 480 | 3:4 | 3.5″ | 163 |
| iPhone 3G | 2008 | 320 × 480 | 320 × 480 | 3:4 | 3.5″ | 163 |
| iPhone 3GS | 2009 | 320 × 480 | 320 × 480 | 3:4 | 3.5″ | 163 |
| iPhone 4 | 2010 | 320 × 480 | 640 × 960 | 3:4 | 3.5″ | 326 |
| iPhone 4S | 2011 | 320 × 480 | 640 × 960 | 3:4 | 3.5″ | 326 |
| iPhone 5 | 2012 | 320 × 568 | 640 × 1136 | 9:16 | 4″ | 326 |
| iPhone 5C | 2013 | 320 × 568 | 640 × 1136 | 9:16 | 4″ | 326 |
| iPhone 5S | 2013 | 320 × 568 | 640 × 1136 | 9:16 | 4″ | 326 |
| iPhone 6 | 2014 | 375 × 667 | 750 × 1334 | 9:16 | 4.7″ | 326 |
| iPhone 6+ | 2014 | 375 × 667 | 750 × 1334 | 9:16 | 4.7″ | 326 |
| iPhone 6S | 2015 | 375 × 667 | 750 × 1334 | 9:16 | 4.7″ | 326 |
| iPhone 6S+ | 2015 | 414 × 736 | 1080 × 1920 | 9:16 | 5.5″ | 401 |
| iPhone SE | 2016 | 320 × 568 | 640 × 1136 | 9:16 | 4″ | 326 |
| iPhone 7 | 2016 | 375 × 667 | 750 × 1334 | 9:16 | 4.7″ | 326 |
| iPhone 7+ | 2016 | 414 × 736 | 1080 × 1920 | 9:16 | 5.5″ | 401 |
| iPhone 8 | 2017 | 375 × 667 | 750 × 1334 | 9:16 | 4.7″ | 326 |
| iPhone 8+ | 2017 | 414 × 736 | 1080 × 1920 | 9:16 | 5.5″ | 401 |
| iPhone X | 2017 | 375 × 812 | 1125 × 2436 | 9:19.5 | 5.8″ | 458 |
| iPhone XS | 2018 | 375 × 812 | 1125 × 2436 | 9:19.5 | 5.8″ | 458 |
| iPhone XS Max | 2018 | 414 × 896 | 1242 × 2688 | 9:19.5 | 6.5″ | 458 |
| iPhone XR | 2018 | 414 × 896 | 828 × 1792 | 9:19.5 | 6.1″ | 326 |
| iPhone 11 | 2019 | 375 × 812 | 828 × 1792 | 9:19.5 | 6.1″ | 458 |
| iPhone 11 Pro | 2019 | 375 × 812 | 1125 × 2436 | 9:19.5 | 5.8″ | 458 |
| iPhone 11 Pro Max | 2019 | 414 × 896 | 1242 × 2688 | 9:19.5 | 6.5″ | 458 |
| iPhone SE 2020 | 2020 | 375 × 667 | 750 × 1334 | 9:16 | 4,7″ | 326 |
| iPhone 12 mini | 2020 | 360 × 780 | 1080 × 2340 | 9:19.5 | 5,4″ | 476 |
| iPhone 12 | 2020 | 390 × 844 | 1170 × 2532 | 9:19.5 | 6,1″ | 460 |
| iPhone 12 Pro | 2020 | 390 × 844 | 1170 × 2532 | 9:19.5 | 6,1″ | 460 |
| iPhone 12 Pro Max | 2020 | 428 × 926 | 1284 × 2778 | 9:19.5 | 6,7″ | 458 |
Источник таблицы, там же можно найти сводную таблицу по разрешениям планшетных компьютеров.
Media queries под новые айфоны
Как видим из таблицы, для новых айфонов нам понадобится учитывать новые величины разрешений экранов мобильных телефонов. Теперь базовый суповой набор под мобильные должен выглядеть следующим образом.
// Мобильное устройство
@media(max-width: 480px) {}
// Iphone 12 pro max
@media(max-width: 428px) {}
// Iphone 11 pro max
@media(max-width: 414px) {}
// Iphone 12
@media(max-width: 390px) {}
// Некоторые андройды
@media(max-width: 380px) {}
// Iphone 11
@media(max-width: 375px) {}
// Iphone 12 mini
@media(max-width: 360px) {}
// Некоторые старые андройды
@media(max-width: 340px) {}
// Iphone 6
@media(max-width: 320px) {}Поддержка экранов шириной менее 320 пикселей в 2021 году считается deprecated.