css - only - queries ipad
Consultas de medios CSS iPhone X/8/8 Plus (4)
¿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.
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
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) { }
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
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: