Fondo

Desde el iPhone de Apple Muchas aplicaciones son directamente compatibles con el estilo de la vista web interna. Cuando la pantalla está en modo vertical, la parte superior suele ser una barra de navegación, que no cubre el contenido de la vista web. La altura inferior se establece desde el nivel de la aplicación para que la parte inferior de la vista web no esté dentro del área de la barra horizontal negra, de modo que no obstaculice la visualización del contenido en la vista web.

Sin embargo, cada aplicación es muy diferente y la vista web interna se mostrará de manera diferente. Si no hay una altura inferior en la aplicación, el contenido inferior de la vista web quedará bloqueado por una pequeña barra negra. En términos de compatibilidad de estilo de página web, debe ser compatible con el exclusivo "flequillo" y el estilo de pequeña barra horizontal negra en la parte inferior del iPhoneX sin afectar el estilo de los modelos anteriores.

Área segura

Primero comprenda el área segura del iphoneX. La parte azul en la imagen de abajo es el área segura. Los márgenes en ambos lados, la muesca en la parte superior y la pequeña barra negra en la parte inferior son áreas inseguras y áreas donde el contenido puede bloquearse. Entonces necesitamos controlar nuestro contenido dentro del área segura.

Solución compatible

Afortunadamente, cuando salió iphoneX, el sistema oficial ios11 también proporcionó WebKit Api para que fuera compatible con esta diferencia de estilo.

Paso uno: Establecer el atributo de ajuste de la ventana gráfica

viewport-fit tiene tres valores de atributo: auto, contener y ajustar. El valor predeterminado es automático.
contener: la ventana visual contiene completamente el contenido de la página web y el contenido de la página se muestra en el área segura
portada: el contenido de la página web cubre completamente la ventana visual y el contenido de la página llena la pantalla
auto: valor predeterminado, consistente con contiene
De forma predeterminada, Safari muestra la situación viewport-fit=contain, como se muestra a continuación. En modo horizontal, el contenido de la página en la vista web está dentro del área segura. Sin embargo, desde una perspectiva de estilo, esto no es muy bonito y no hace un buen uso de la función de pantalla completa que ofrece el iPhoneX.

Para resolver este problema, WebKit en ios11 incluye una nueva función CSS env() y cuatro variables de entorno predefinidas safe-area-inset-left, safe-area-inset-right, área-segura-incrustada-arriba y área-segura-incrustada-abajo. Estas cuatro variables ambientales representan la distancia desde el área segura.

  • safe-area-inset-left: La distancia entre el área segura y el límite izquierdo
  • safe-area-inset-right: La distancia entre el área segura y el límite derecho
  • safe-area-inset-top: La distancia entre el área segura y el límite superior
  • safe-area-inset-bottom: La distancia entre el área segura y el límite inferior

ios11.2 solía usar la función constantes(), pero luego se cambió a la función env() en la versión ios11.2. Para ser compatible con ambos, puedes escribir ambos.

Paso 2: Establezca la distancia del área segura

.post {
    relleno: 12px;
    padding-left: constantes(área-segura-inset-left); // ios<11.2
    padding-left: env(área-segura-inset-left); // ios>=11.2
}

De esta manera, cuando no está en el área segura, env(safe-area-inset-left) no es igual a 0, lo que hará que se establezca una distancia segura en padding-left para que el contenido no quede bloqueado.

Lo anterior es el caso en el que está bloqueado por "flequillo". De hecho, en más casos, la pequeña barra negra en la parte inferior bloquea la barra flotante, además del juicio de soporte de atributos @supports , el CSS interno solo se ejecutará cuando env(safe-area-inset-bottom) sea compatible con el navegador. 

.barra inferior{
  ancho: 100%;
  posición: fija;
  abajo: 0;
  fondo: azul;
}
@supports (padding-bottom: env(área-segura-inset-bottom)) {
    .barra inferior {
      fondo de relleno: constante (parte inferior insertada en área segura);
      padding-bottom: env(área-segura-inset-bottom);
    }
  }

Nota: La vista web en WeChat está en el estado predeterminado viewport-fit=cover. Sólo es necesario establecer una distancia de seguridad. La solución anterior también es aplicable al subprograma WeChat.