css - only - queries ipad

Consultas de medios CSS iPhone X/8/8 Plus

Question

¿Cuáles son las consultas de medios CSS correspondientes a los nuevos dispositivos de Apple? Necesito establecer el background-color del body para cambiar el color de fondo del área segura de la X.

Answer 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 + comparten los mismos tamaños, mientras que el iPhone 7/8 también lo hace.

¿Buscas una orientación específica?

Retrato

Agregue la siguiente regla:

    and (orientation : portrait) 

Paisaje

Agregue la siguiente regla:

    and (orientation : landscape) 

Referencias

• 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/

Answer 2

Estas son algunas de las siguientes consultas de medios para iphones. Aquí está el enlace de referencia 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) { }

Answer 3

Noté que las respuestas aquí están usando: device-width device-height , device-width device-height min-device-width , device-height min-device-width min-device-height , min-device-width min-device-height max-device-width , min-device-height max-device-width max-device-height .

Abstenerse de usarlos ya que están en desuso . ver MDN para referencia . En su lugar, use el min-width regular min-width max-width , etc. Para mayor seguridad, puede establecer el mínimo y el máximo en la misma cantidad de px. Por ejemplo:

iPhone X

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

También puede notar que estoy usando 635px para la altura. Pruébelo usted mismo, la altura de la ventana es en realidad de 635 px. ejecute el simulador de iOS para iPhone X y en Safari Web inspector haga window.innerHeight . Aquí hay algunos enlaces útiles sobre este tema:

• 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

Answer 4

Parece que el método más preciso (y perfecto) de agregar el relleno para iPhone X / 8 usando env () ...

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

Aquí hay un enlace que describe esto:

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