iPhone X / 8 / 8 Плюс мультимедийные запросы CSS

Что мультимедийные запросы CSS соответствуют новым устройствам Apple? Я должен установить body background-color изменить X безопасный цвет фона области.

62
задан 20 September 2017 в 08:02

4 ответа

iPhone X

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { }
<час>

iPhone 8

@media only screen 
    and (device-width : 375px) 
    and (device-height : 667px) 
    and (-webkit-device-pixel-ratio : 2) { }
<час>

iPhone 8 Plus

@media only screen 
    and (device-width : 414px) 
    and (device-height : 736px) 
    and (-webkit-device-pixel-ratio : 3) { }


iPhone 6 +/6s +/7 +/8 + совместно использует те же размеры, в то время как iPhone 7/8 также делает.

<час>

Поиск определенной ориентации?

Портрет

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

    and (orientation : portrait) 

Среда

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

    and (orientation : landscape) 



Ссылки:

120
ответ дан 31 October 2019 в 13:11

Вот некоторые следующие мультимедийные запросы для iPhone. Вот касательно ссылки https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

    /* iphone 3 */
    @media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 1) { }

    /* iphone 4 */
    @media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 2) { }

    /* iphone 5 */
    @media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (-webkit-device-pixel-ratio: 2) { }

    /* iphone 6, 6s, 7, 8 */
    @media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { }

    /* iphone 6+, 6s+, 7+, 8+ */
    @media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) { }

    /* iphone X */
    @media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) { }

    /* iphone XR */
    @media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 2) { }

   /* iphone XS */
    @media only screen and (min-device-width : 375px) and (max-device-height : 812px) and (-webkit-device-pixel-ratio : 3) { }

   /* iphone XS Max */
    @media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 3) { }
59
ответ дан 31 October 2019 в 13:11

Я заметил, что ответы здесь используют: device-width, device-height, min-device-width, min-device-height, max-device-width, max-device-height.

воздержитесь от использования их, так как они удерживаются от использования . см. MDN для ссылки . Вместо этого используйте постоянного клиента min-width, max-width и так далее. Для дополнительного обеспечения можно установить минуту и макс. к той же сумме пкс. Например:

iPhone X

@media only screen 
    and (width : 375px) 
    and (height : 635px)
    and (orientation : portrait)  
    and (-webkit-device-pixel-ratio : 3) { }

можно также заметить, что я использую 635 пкс для высоты. Попробуйте его сами, высота окна является на самом деле выполненным средством моделирования iOS на 635 пкс для iPhone X, и в сети Safari инспектор делает window.innerHeight. Вот несколько полезных ссылок на этом предмете:

13
ответ дан 31 October 2019 в 13:11

Кажется что самое точное (и бесшовный) метод добавления дополнения для iPhone X/8 с помощью ENV ()...

padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

Вот ссылка, описывающая это:

https://css-tricks.com/the-notch-and-css /

0
ответ дан 31 October 2019 в 13:11

Другие вопросы по тегам:

Похожие вопросы: