iPhone XR / XS / XS Max CSS медиа-запросы - PullRequest
Новая
       20

iPhone XR / XS / XS Max CSS медиа-запросы

0 голосов
/ 13 сентября 2018

Какие правильные мультимедийные запросы CSS используются для устройств Apple 2018: iPhone XR / XS / XS Max?

Ответы [ 3 ]

0 голосов
/ 09 января 2019

Вышеприведенное верно, но разработчикам необходимо ориентироваться на истинные размеры экрана, чтобы избежать масштабирования, обрезки и т. Д. Например, для XR размер экрана по умолчанию на самом деле составляет 808 пикселей.

Так что это может быть более подходящим: @media (max-width: 808px) {...
Фактически этот запрос будет переопределен: @media (max-width: 896px) {...

Проблема в безопасной зоне яблоквставки.Их можно преодолеть и получить истинную ширину от 896 пикселей до ширины края, добавив следующее:

Метатег: viewport-fit = cover CSS: body {padding: env (safe-area-inset, 0px);}

Размер поля 0px можно изменить, добавить переменные в левом верхнем нижнем углу или адаптировать для портрета / пейзажа.Но большинство из них уже имеют достаточную прокладку в своем дизайне.

Ссылка: https://webkit.org/blog/7929/designing-websites-for-iphone-x/

Не тестировалась на других устройствах, но, похоже, все они применяют одно и то же.

0 голосов
/ 21 марта 2019

Информация от Натана отличная. Спасибо за контрольные точки, которых нет у каждого инспектора браузера. Единственная проблема, с которой я столкнулся, заключалась в том, что все мои предыдущие медиазапросы использовали такие вещи, как 

/* Landscape */
@media only screen 
    and (min-device-width : 414px) 
    and (max-device-height : 896px) 
    and (-webkit-device-pixel-ratio : 3)
    and (orientation : landscape) {

, тогда как в приведенном выше решении используется только 

and (device-width : 414px)

, что может вызвать проблемы с уже имеющимися у вас запросами, использующими как min-device, так и max-device.

Большое спасибо за эти размеры и DPRs!

0 голосов
/ 13 сентября 2018

iPhone XR 

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

iPhone XS 

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

iPhone XS Max 

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

1012 *
*

Ищете определенную ориентацию?

Портрет

Добавить следующее правило: 

    and (orientation : portrait)

Пейзаж

Добавить следующее правило: 

    and (orientation : landscape)



Ссылки:

...