El iPhone X de Apple tiene una pantalla que cubre toda la cara del teléfono, excepto por una “muesca” para dejar espacio para una cámara y otros componentes. El resultado son algunas situaciones incómodas para el diseño de la pantalla, como restringir los sitios web a un “área segura” y tener barras blancas en los bordes. Sin embargo, no es un gran truco eliminarlo, un background-color
en el cuerpo servirá. O bien, expanda el sitio web por toda el área (al diablo con la muesca), puede agregar viewport-fit = cover a su metaetiqueta de viewport.
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
Entonces depende de usted tener en cuenta cualquier superposición que normalmente habría sido manejada por el área segura. Hay un CSS nuevo que le ayuda a adaptarse a eso. Documentos de Stephen Radford:
Para manejar cualquier ajuste que pueda ser necesario, la versión de Safari de iOS 11 incluye algunas constantes que se pueden usar cuando viewport-fit=cover
esta siendo usado.
safe-area-inset-top
safe-area-inset-right
safe-area-inset-left
safe-area-inset-bottom
Esto se puede agregar a margin
, padding
, o valores de posición absolutos como top
o left
.
Agregué lo siguiente al contenedor principal del sitio web.
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
(Actualizar: cuando salió el iPhone X, usaba constant()
en vez de env()
, pero a partir del 11.2, constant()
ha sido eliminado a favor de la estandarizada env()
).
Hay otra situación incómoda con la muesca, el área segura y el posicionamiento fijo. Darryl Pogue informa:
Donde iOS 11 se diferencia de las versiones anteriores es que el contenido de la vista web ahora respeta las áreas seguras. Esto significa que si tiene una barra de encabezado que es un elemento de posición fija con top: 0, inicialmente se representará 20px debajo de la parte superior de la pantalla: alineado con la parte inferior de la barra de estado. A medida que se desplaza hacia abajo, se moverá hacia arriba detrás de la barra de estado. A medida que se desplaza hacia arriba, volverá a caer debajo de la barra de estado (dejando un espacio incómodo donde el contenido se muestra en el espacio de 20 píxeles).
Puedes ver lo malo que es en este videoclip:
Afortunadamente también es una solución fácil, ya que viewport-fit=cover
además de la etiqueta meta viewport lo corrige.
Si vas a cubrir esa ventana, es probable que tengas que ser un poco inteligente para evitar el contenido oculto.
Creo que solucioné el problema de la muesca en el paisaje 🍾 #iphoneX pic.twitter.com/hGytyO3DRV
– Vojta Stavik (@vojtastavik) 13 de septiembre de 2017