fundo

Do iphone da Apple Muitos aplicativos são diretamente compatíveis com o estilo de webview 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, vamos dar uma olhada na área segura do iPhone

Soluções compatíveis

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 1: definir o atributo viewport-fit

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
viewport-fit possui três valores de atributo: auto, contains e fit. O padrão é automático.
conter: 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 fornecido pelo iPhoneX.

Para resolver este problema, o WebKit no ios11 inclui uma nova função CSS env(), bem como quatro variáveis ​​de ambiente predefinidassafe-area-inset-left,safe-area-inset-right,safe-area-inset-topesafe-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: distância da área segura até o limite superior
  • safe-area-inset-bottom: distância da área segura até o limite inferior

Antes do ios11.2, a função constantes() era usada, mas posteriormente foi alterada para a função env() no ios11.2. Para ser compatível com ambos, você pode escrever ambos.

Passo 2: Defina a distância da zona segura

.post {
    padding: 12px;
    padding-left: constants(safe-area-inset-left); // ios<11.2
    padding-left: env(safe-area-inset-left); // 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 seja definida uma distância segura no padding-left para que o conteúdo não seja bloqueado.

O caso acima é o caso em que é bloqueado por "bangs". Na verdade, em mais casos, a pequena barra preta na parte inferior bloqueia a barra flutuante e os atributos apoiam o julgamento.@supports,apenasenv(safe-area-inset-bottom)O css interno só será executado quando for suportado pelo navegador.

 

.bottom-bar{
  width: 100%;
  position: fixed;
  bottom: 0;
  background: blue;
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .bottom-bar {
      padding-bottom: constant( safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }
  }

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