La muesca de la pantalla del iPhone Cuando está fija en la parte superior, si desliza la página hacia arriba o hacia abajo, habrá un gran espacio. Está bien si el fondo es completamente blanco; de lo contrario, parecerá que está roto, lo cual es muy feo. .
tamaño de pantalla del iphone
La diferencia de tamaño entre el iPhoneX y otros modelos
El motivo del problema anterior es que el iPhoneX tiene un área segura. El área segura se refiere a un rango de ventana visual. El contenido del área segura no se ve afectado por las esquinas, la carcasa del sensor y el indicador de inicio, el área azul en la figura siguiente. :
Es decir, si queremos adaptarnos bien, debemos asegurarnos de que el área visible y operable de la página esté dentro del área segura.
Para dimensiones específicas, consulte las Pautas de interfaz humana – iPhoneX
¿Cómo adaptarse?El primer paso es configurar el diseño de la página web en la ventana visual.
<meta nombre=contenido de ventana gráfica=ancho=ancho de dispositivo, ajuste de ventana gráfica=cubierta>
Una nueva característica de iOS11 Para adaptarse al iPhoneX, Apple ha ampliado la metaetiqueta de la ventana gráfica existente para configurar el diseño de la página web en la ventana visual.
Nota: La página web que no agrega extensiones de forma predeterminada es viewport-fit=contain. Si necesita adaptarse al iPhoneX, se debe configurar viewport-fit=cover. Este es un paso clave para la adaptación.Para obtener más información, consulte: El descriptor de ajuste de ventana gráfica
En el segundo paso, el contenido principal de la página se limita al área segura.
.post { padding: 12px; padding-left: env(safe-area-inset-left); padding-left: const(safe-area-inset-left); ); relleno-derecha: const(área-segura-inset-derecha);} función constanteSe utiliza una nueva característica de iOS11, una función CSS de Webkit, para establecer la distancia entre el área segura y el límite. Hay cuatro variables predefinidas:
Nota: Algunos navegadores ya no admiten la función constante y en su lugar utilizan la función env.
De forma predeterminada, si el cliente maneja la zona de seguridad, el efecto es el siguiente:
Después de usar el atributo viewport-fit=cover de pantalla completa:
Mapa de zonas de seguridad:
Representación después de limitar el área segura:
El relleno se establece en 12 píxeles arriba si se gira la dirección:
El tercer paso es utilizar los métodos min() y max().
@supports(padding: max(0px)) { .post { padding-left: max(12px, env(safe-area-inset-left)); bien)); }} Problema solucionado del elemento fijo.
Si el título de la página se implementa en la parte frontal y está fijo en la parte superior, se bloqueará. En este momento, puede establecer el valor superior en un valor de distancia segura, por ejemplo:
.header{top:env(área-segura-inset-top);top:const(área-segura-inset-top);}Artículo de referencia: Diseño de sitios web para iPhone X
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.