Primero echemos un vistazo a cómo se ve el modelo de iPhone X.
En la imagen superior, el modelo Iphonex tiene estas dos nuevas zonas en la cabeza y en la parte inferior, por lo que tendremos que hacer algunas adaptaciones para este tipo de modelo para facilitar la visualización de nuestra webapp.
Para las páginas móviles hechas de h5, el diseño común es el modo de tres columnas cabeza + torso + parte inferior. La cabeza y la parte superior están colocadas de forma fija y el contenido del torso se puede desplazar. El diseño provisional es el siguiente:
<div class=página> <encabezado></encabezado> <principal></principal> <pie de página></pie de página> </div>
Sin embargo, si no utiliza los nuevos atributos CSS del Iphone. En esta situación, la barra de navegación en la parte inferior está bloqueada por la luz de respiración que viene con el Iphone. Se han comprobado varias soluciones.
Estoy usando el marco vue. En la página index.html, necesitamos agregar.
<meta nombre=contenido de la ventana gráfica=ancho=ancho del dispositivo,ajuste de la ventana gráfica=cubierta>
Luego, en la página pública app.vue, la visualización de cada uno de nuestros componentes se reemplaza por la vista del enrutador aquí, por lo que la barra de encabezado público se puede procesar aquí. El diseño específico es el siguiente:
<template><div id=app><div class=placeholder_top :style={position:fixpositiona?'absolute':'fixed'}></div><router-view class=routerview></router-view>< /div></plantilla>En el diseño anterior, escribimos lo siguiente para el div con la clase placeholder_top:
.placeholder_top { posición: fijo; arriba: 0; izquierda: 0; ancho: 10rem; color de fondo: #303030; altura: constante (área-segura-arriba); ); índice z: 999;}En este caso, ya no tendremos que lidiar con el problema de la barra superior para componentes separados en el futuro. A continuación, podemos lidiar con el problema del encabezado mencionado anteriormente. Generalmente, la mayoría de los encabezados se encapsularán en componentes públicos, por lo que. Aquí, debido a la influencia del elemento que insertamos en la página app.vue, el método de escritura CSS de nuestro encabezado también debe modificarse ligeramente. El diseño de la página del componente principal es el siguiente:
<template><header> <div class=title :style={position:fixposition?'absolute':'fixed'}> Contenido de navegación</div> <div class=placeholder></div> </header></ plantilla>El CSS de la página es:
encabezado {color de fondo: # 303030; .título {posición: fijo; arriba: 0; arriba: constante (área-segura-inset-top); arriba: env (área-segura-inset-top); altura: 88px; índice z: 999; } .placeholder{ altura: 88px ancho: 10rem;Escrito así, la barra de navegación principal se ubicará debajo de la barra de estado del teléfono móvil, no afectará la ventana y es compatible con los modelos Android e iOS (tales problemas de compatibilidad también implican problemas del sistema con iOS, pero este artículo aún no involucrado)
Ahora veamos el procesamiento del área principal. Debido a que el componente del encabezado anterior ha sido procesado, el diseño principal es el siguiente:
principal {padding-top: constante(área-segura-inset-top);padding-top: env(área-segura-inset-top);padding-bottom: calc(88px + constante(área-segura-inset-bottom) );padding-bottom: calc(88px + env(área-segura-inset-bottom));PD: Déjame explicarte aquí. Las dos líneas siguientes se utilizan cuando la página actual no tiene una barra de navegación inferior.
padding-bottom: constante (área-segura-inset-bottom); padding-bottom: env(área-segura-inset-bottom);},
El diseño principal está listo, simplemente escriba el contenido directamente.
Luego mire el diseño del pie de página en la parte inferior.
<template><footer> <div class=foot :style={position:fixposition?'absolute':'fixed'}> Contenido inferior</div></footer></template>El CSS del contenido inferior es el siguiente:
pie de página {posición: fijo; abajo: 0; izquierda: 0; ancho: 10rem; altura: calc (88px + constante (área-segura-incrustación-inferior)); abajo)); color de fondo: #303030; .foot{ posición: absoluta; arriba: 0; ancho: 10rem; 88px;}}Escrito de esta manera, el contenido del pie de navegación inferior no será bloqueado por la luz respiratoria que viene con el teléfono.
Entonces podemos resumir que el método de escritura CSS que podemos necesitar usar en este tipo de adaptación de aplicación web es el siguiente:
posición: fijo; arriba: constante (área-segura-inset-top); arriba: env (área-segura-inset-top); -inset-bottom); calc(1rem + constante(área-segura-inset-top)); calc(1rem + env(área-segura-inset-top)); calc(1rem + constante(área-segura-incrustado-abajo)); calc(1rem + env(área-segura-incrustado-abajo));
ps: en el escrito anterior, está escrito: estilo = {posición: posición fija? 'absoluta': 'fija'}. Esto es para resolver el problema del posicionamiento inexacto de dichos elementos fijos cuando el usuario hace clic en el cuadro de entrada y el Aparece el teclado virtual. Si está interesado, puede estudiarlo. Este artículo no lo discutirá por ahora.
Aquí se pueden utilizar diferentes métodos de escritura según las necesidades reales. Se recomienda no desviarse demasiado de la lógica de diseño general. Además, se escribe de esta manera para un procesamiento unificado y un mantenimiento conveniente. Si se encuentran problemas de compatibilidad de diseño, se puede utilizar la depuración de la máquina real. El método consiste en utilizar el navegador de la PC para depurar la aplicación web y revisar los elementos. Esto básicamente puede resolver la mayoría de los problemas de estilo que escribiré sobre la depuración de la máquina real la próxima vez.
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.