La clave para la adaptación del IphoneX es cómo adaptar la página a las muescas, al área operativa inferior y a las grandes esquinas redondeadas.
En comparación con otros teléfonos móviles, la diferencia entre IphoneX es que, aunque el dispositivo también tiene una pantalla, en realidad está dividido en varios módulos. Consulte la figura siguiente para obtener más detalles:
Cuando movemos una página web normal a X, el efecto es que el contenido solo se muestra en el Área segura y no hay contenido web en el área no segura. Eso significa que aparecerán bloques blancos en la parte superior e inferior. para afrontarlo?
Solución 1. Agrega un color de fondo al cuerpo.¿Por qué agregar color de fondo? ¿De qué sirve? Tenga en cuenta que habrá manchas blancas en la cabeza y en la parte inferior que acabamos de mencionar. De hecho, no es exacto decir que es blanco, porque este color en realidad proviene del color de fondo del cuerpo. Además, cuando subimos o bajamos el contenido, se mostrará el contenido y el color en la parte inferior de la página web, que en realidad es el color de fondo del cuerpo. Entonces, si deseas modificar estos dos efectos, puedes configurar el color de fondo del cuerpo.
2. Agregue la etiqueta <meta> de viewport-fit = coverEste paso es extremadamente crítico. Veamos primero los resultados:
Copiar código