Які CSS-медіа-запити відповідають новим пристроям Apple? Мені потрібно встановити body"s", background-colorщоб змінити колір тла безпечної області X.

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) 

Список літератури:

• https://webkit.org/blog/7929/designing-websites-for-iphone-x/
• https://developer.apple.com/ios/human-interface-guidelines/visual-design/adaptivity-and-layout/
• https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/
• https://mydevice.io/devices/
• http://viewportsizes.com/mine/

Ось деякі з наступних медіа-запитів для 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 , XS, 11 Pro, 12 Mini */
        @media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) { }

        /* iphone 12, 12 Pro */
        @media only screen and (min-device-width: 390px) and (max-device-height: 844px) and (-webkit-device-pixel-ratio: 3) { }
       
        /* iphone XR, 11 */
        @media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 2) { }
            
        /* iphone XS Max, 11 Pro Max */
        @media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 3) { }

        /* iphone 12 Pro Max */
        @media only screen and (min-device-width : 428px) and (max-device-height : 926px) and (-webkit-device-pixel-ratio : 3) { }

Я помітив , що відповіді тут використовують: device-width, device-height, min-device-width, min-device-height, max-device-width,max-device-height .

Утримайтеся від їх використання, оскільки вони застаріли . див. MDN для довідки . Замість того, щоб використовувати регулярні min-width, max-widthі так далі. Для додаткової впевненості ви можете встановити min і max на однакову величину в px. Наприклад:

iPhone X

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

Ви також можете помітити, що я використовую 635px для висоти. Спробуйте самі, висота вікна насправді 635 пікселів. запустіть iOS-симулятор для iPhone X та у веб-інспекторі Safari window.innerHeight. Ось кілька корисних посилань на цю тему:

• https://medium.com/@hacknicity/how-ios-apps-adapt-to-the-iphone-x-screen-size-a00bd109bbb9
• https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
• https://ivomynttinen.com/blog/ios-design-guidelines
• https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

Здається, найточніший (і найпростіший) метод додавання відступів для 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/

Якщо на вашій сторінці в meta[@name="viewport"]елементі DOM відсутній елемент, то для виявлення мобільного пристрою можна використовувати наступне:

@media only screen and (width: 980px), (hover: none) { … }

Якщо ви хочете уникнути помилкових спрацьовувань на настільних комп’ютерах, для яких просто магічним чином для області перегляду встановлено значення 980px, як це роблять усі мобільні браузери, тоді device-widthдо міксу можна також додати тест:

@media only screen and (max-device-width: 800px) and (width: 980px), (hover: none) { … }

Згідно зі списком https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries , нова hoverвластивість, здається, є остаточним новим способом виявити, що у вас є мобільний пристрій це насправді не робить належним чином hover; він був представлений лише в 2018 році з Firefox 64 (2018), хоча підтримується з 2016 року з Android Chrome 50 (2016) або навіть з 2014 року з Chrome 38 (2014):

• https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover