Fundo

Do iphone da Apple Muitos aplicativos são diretamente compatíveis com o estilo de visualização da web interno. Quando a tela está no modo retrato, a parte superior geralmente é uma barra de navegação, que não cobre o conteúdo do webview. A altura inferior é definida a partir do nível do aplicativo para que a parte inferior do webview não fique dentro da área preta da barra horizontal, para não atrapalhar a exibição do conteúdo no webview.

No entanto, cada aplicativo é muito diferente e a visualização da web interna será exibida de forma diferente. Se não houver altura inferior do aplicativo, o conteúdo inferior do webview será bloqueado por uma pequena barra preta. Em termos de compatibilidade de estilo de página da web, ele precisa ser compatível com as “franjas” exclusivas e o estilo de pequena barra horizontal preta na parte inferior do iPhoneX, sem afetar o estilo dos modelos anteriores.

Área Segura

Primeiro entenda a área segura do iphoneX. A parte azul na imagem abaixo é a área segura. As margens em ambos os lados, o entalhe na parte superior e a pequena área de barra preta na parte inferior são áreas inseguras e são áreas onde o conteúdo pode ser bloqueado. Então precisamos controlar nosso conteúdo dentro da área segura.

Solução compatível

Felizmente, quando o iphoneX foi lançado, o sistema oficial ios11 também forneceu WebKit Api para ser compatível com essa diferença de estilo.

Etapa um: definir o atributo viewport-fit

viewport-fit possui três valores de atributos: auto, contains e fit. O padrão é automático.
contém: A janela visual contém completamente o conteúdo da página da web, e o conteúdo da página é exibido na área segura
capa: o conteúdo da página da web cobre completamente a janela visual e o conteúdo da página preenche a tela
auto: valor padrão, consistente com contém
Por padrão, o Safari exibe a situação viewport-fit=contain, conforme mostrado abaixo. No modo paisagem, o conteúdo da página na webview está dentro da área segura. No entanto, do ponto de vista do estilo, isso não é muito bonito e não aproveita bem o recurso de tela cheia oferecido pelo iPhoneX.

Para resolver este problema, o WebKit no ios11 inclui uma nova função CSS env() e quatro variáveis de ambiente predefinidas safe-area-inset-left, safe-area-inset-right, safe-area-inset-top e safe-area-inset-bottom. Estas quatro variáveis ​​ambientais representam a distância da área segura.

  • safe-area-inset-left: A distância entre a área segura e o limite esquerdo
  • safe-area-inset-right: A distância entre a área segura e o limite direito
  • safe-area-inset-top: A distância entre a área segura e o limite superior
  • safe-area-inset-bottom: A distância entre a área segura e o limite inferior

ios11.2 costumava usar a função constantes(), mas posteriormente foi alterada para a função env() na versão ios11.2. Para ser compatível com ambos, você pode escrever ambos.

Etapa 2: Defina a distância da área segura

.post {
    preenchimento: 12px;
    preenchimento à esquerda: constantes (área segura inserida à esquerda); //ios<11.2
    preenchimento à esquerda: env (área segura inserida à esquerda); //ios>=11.2
}

Desta forma, quando não estiver na área segura, env(safe-area-inset-left) não é igual a 0, o que fará com que uma distância segura seja definida no padding-left para que o conteúdo não seja bloqueado.

O acima é o caso em que é bloqueado por "bangs". Na verdade, em mais casos, a pequena barra preta na parte inferior bloqueia a barra flutuante, além de julgamento de suporte de atributo@suporta , o css interno só será executado quando env(safe-area-inset-bottom) for suportado pelo navegador. 

.barra inferior{
  largura: 100%;
  posição: fixa;
  inferior: 0;
  fundo: azul;
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .barra inferior {
      fundo de preenchimento: constante (fundo inserido na área segura);
      preenchimento inferior: env (área segura inserida inferior);
    }
  }

Nota: A visualização da web no WeChat está no estado viewport-fit=cover padrão. Você só precisa definir uma distância segura. A solução acima também se aplica ao miniaplicativo WeChat.