Recientemente, estoy trabajando en un subprograma de WeChat. Hay una función en la que el botón Enviar se coloca en la parte inferior de la pantalla. Posición: se usa absoluto para el posicionamiento, y la parte inferior se establece en 0. La pantalla normal debería verse así:
Sin embargo, durante la autocomprobación, se descubrió que en algunos modelos de ios, como iPhoneX, iPhone12/13, el botón estará parcialmente bloqueado por la pequeña línea negra en la parte inferior de ios:
Obviamente, esta pantalla no es amigable, así que la estudié y descubrí que hay una característica en css que puede resolver el problema de la pequeña línea negra en la parte inferior de la iso, a saber, env (área segura-recuadro-inferior). área segura, es decir, el área segura se refiere a un rango de ventana visible, y el contenido en el área segura no se ve afectado por las esquinas, la carcasa del sensor y el indicador de inicio.
Cuando usé este atributo por primera vez, agregué directamente este atributo al final de positon:absolute, pero la prueba encontró que agregar este atributo al final puede dejar una cierta distancia segura en la parte inferior, pero la parte vacante revelará el contenido de desplazamiento de la página .
En este punto, el código css se ve así:
position: fixed;left: 0;bottom: env(safe-area-inset-bottom);
Después de una serie de ajustes, se encuentra que es más apropiado agregar el atributo env (safe-area-inset-bottom) a la altura o padding.El efecto es el siguiente:
En este punto, el código css se ve así:
position: fixed;left: 0;bottom: 0;padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
¡Resuelva completamente el problema!
Traté de poner el atributo en la altura, que también puede resolver este problema, el código es el siguiente:
position: fixed;left: 0;bottom: 0;height:calc(100rpx + env(safe-area-inset-bottom));
por fin
Para los estudiantes que nunca han estado expuestos a la seguridad de la red, hemos preparado una hoja de ruta detallada de aprendizaje y crecimiento para usted. Se puede decir que es la ruta de aprendizaje más científica y sistemática, y no es problema para todos seguir esta dirección general.
Al mismo tiempo, hay videos de apoyo para cada sección correspondiente a la ruta de crecimiento:
Por supuesto, además de los videos de apoyo, se han clasificado para usted varios documentos, libros, materiales y herramientas, y se han clasificado en categorías para tú.
Debido al espacio limitado, solo se muestra parte de la información. Los amigos que lo necesiten pueden [hacer clic en la tarjeta a continuación] para obtenerla gratis: