Каковы медиа-запросы iPhone 11/11 Pro / 11 Pro Max? - PullRequest
Новая
       5

Каковы медиа-запросы iPhone 11/11 Pro / 11 Pro Max?

1 голос
/ 24 сентября 2019

Какие правильные мультимедийные запросы CSS используются для таргетинга на устройства Apple 2019?

Макс. IPhone 11, iPhone 11 Pro и iPhone 11 Pro.

1 Ответ

2 голосов
/ 24 сентября 2019

iPhone 11 

/* 1792x828px at 326ppi */
@media only screen 
    and (device-width: 414px) 
    and (device-height: 896px) 
    and (-webkit-device-pixel-ratio: 2) { }

Этот медиа-запрос также предназначен для: iPhone XR

iPhone 11 Pro 

/* 2436x1125px at 458ppi */
@media only screen 
    and (device-width: 375px) 
    and (device-height: 812px) 
    and (-webkit-device-pixel-ratio: 3) { }

Этот медиа-запрос также предназначен для: iPhone X и iPhone Xs

iPhone 11 Pro Max 

/* 2688x1242px at 458ppi */
@media only screen 
    and (device-width: 414px) 
    and (device-height: 896px) 
    and (-webkit-device-pixel-ratio: 3) { }

Этот медиа-запрос также предназначен для:iPhone Xs Max

Ориентация устройства

Чтобы добавить альбомную или портретную ориентацию, используйте следующий код:

Для портрета: 

and (orientation : portrait)

Для ландшафта: 

and (orientation : landscape)
...