WP dev.

📱 iPhone iOS — список max-width (CSS width)

Вот полный список всех iPhone по годам, начиная с iPhone 3, с их реальной CSS-шириной (то, что используется в @media (max-width)).

МодельCSS width@media
iPhone 3 / 4 / 5 / SE 1320@media (max-width: 320px)
iPhone 6–8 (4.7″)375@media (max-width: 375px)
iPhone X / XS / 11 Pro375@media (max-width: 375px)
iPhone 6+/7+/8+414@media (max-width: 414px)
iPhone XR / XS Max / 11 / 11 Pro Max414@media (max-width: 414px)
iPhone 12/13 mini360@media (max-width: 360px)
iPhone 12/13/14/15/16390@media (max-width: 390px)
iPhone 12/13/14/15/16 Plus/Pro Max428@media (max-width: 428px)

⚠️ Важно: в CSS учитывается логическая ширина (CSS pixels), а не физическое разрешение.

Другие breakpoints

Старые мобильные устройства (до-смартфонная эпоха)

Эти breakpoints почти никто не использует сейчас:

@media (max-width: 240px) {}   /* старые кнопочные телефоны */
@media (max-width: 320px) {}   /* ранние смартфоны (iPhone 3/4) */

Под очень большие экраны (>2000px)

Мало кто делает отдельную вёрстку для 4K/5K.

@media (min-width: 1920px) {}
@media (min-width: 2560px) {}   /* QHD / 2.5K */
@media (min-width: 3440px) {}   /* ультраширокие мониторы */
@media (min-width: 3840px) {}   /* 4K */
@media (min-width: 5120px) {}   /* 5K */

Breakpoints под Smart TV

Телевизоры — редкое применение.

@media (min-width: 1600px) {}
@media (min-width: 1920px) {}

Breakpoints по высоте

Высота почти не используется в responsive, кроме спец-задач.

@media (max-height: 600px) {}
@media (max-height: 700px) {}
@media (min-height: 900px) {}

Breakpoints под нестандартные устройства (редкие планшеты)

@media (max-width: 600px) {}   /* Nexus 7 */
@media (max-width: 820px) {}   /* редкие Android-планшеты */
@media (max-width: 900px) {}

Touch / hover breakpoints

@media (hover: none) {}     /* устройства без курсора */
@media (hover: hover) {}    /* десктопы с мышью */
@media (pointer: coarse) {} /* пальцы */
@media (pointer: fine) {}   /* мышь */

Используют UX-специалисты, но VERY rare.

Геймерские мониторы 21:9, 32:9

@media (min-width: 3000px) {}
@media (min-aspect-ratio: 21/9) {}
@media (min-aspect-ratio: 32/9) {}

//комментарии