8 (499) 3-777-413

Вёрстка под новые айфоны

Адаптивная верстка требует нетривиальных решений и усложняется с выходом новых устройств на рынок. Какие разрешения используются на мобильных телефонах Эппл?

Сводная таблица с разрешениями мобильных устройств Apple

МодельГод выпускаРазрешениеРеальное разрешениеСоотношение сторонДиагональПикселей на дюйм
iPhone 2G2007320 × 480320 × 4803:43.5″163
iPhone 3G2008320 × 480320 × 4803:43.5″163
iPhone 3GS2009320 × 480320 × 4803:43.5″163
iPhone 42010320 × 480640 × 9603:43.5″326
iPhone 4S2011320 × 480640 × 9603:43.5″326
iPhone 52012320 × 568640 × 11369:164″326
iPhone 5C2013320 × 568640 × 11369:164″326
iPhone 5S2013320 × 568640 × 11369:164″326
iPhone 62014375 × 667750 × 13349:164.7″326
iPhone 6+2014375 × 667750 × 13349:164.7″326
iPhone 6S2015375 × 667750 × 13349:164.7″326
iPhone 6S+2015414 × 7361080 × 19209:165.5″401
iPhone SE2016320 × 568640 × 11369:164″326
iPhone 72016375 × 667750 × 13349:164.7″326
iPhone 7+2016414 × 7361080 × 19209:165.5″401
iPhone 82017375 × 667750 × 13349:164.7″326
iPhone 8+2017414 × 7361080 × 19209:165.5″401
iPhone X2017375 × 8121125 × 24369:19.55.8″458
iPhone XS2018375 × 8121125 × 24369:19.55.8″458
iPhone XS Max2018414 × 8961242 × 26889:19.56.5″458
iPhone XR2018414 × 896828 × 17929:19.56.1″326
iPhone 112019375 × 812828 × 17929:19.56.1″458
iPhone 11 Pro2019375 × 8121125 × 24369:19.55.8″458
iPhone 11 Pro Max2019414 × 8961242 × 26889:19.56.5″458
iPhone SE 20202020375 × 667750 × 13349:164,7″326
iPhone 12 mini2020360 × 7801080 × 23409:19.55,4″476
iPhone 122020390 × 8441170 × 25329:19.56,1″460
iPhone 12 Pro2020390 × 8441170 × 25329:19.56,1″460
iPhone 12 Pro Max2020428 × 9261284 × 27789:19.56,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.