Ответ 1

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/

Ответ 2

Вот некоторые из следующих медиа-запросов для 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) { }

Ответ 3

Я заметил, что здесь используются ответы: 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) { }

Вы также можете заметить, что я использую 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

Ответ 4

Кажется, что наиболее точный (и плавный) способ добавления отступов для 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/

Ответ 5

Если на вашей странице отсутствует элемент 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