Implementação simples de Html5 adaptando-se à tela notch do iphoneX

O entalhe da tela do iphone Quando fixado na parte superior, se você deslizar a página para cima ou para baixo, haverá uma grande lacuna. Tudo bem se o fundo for todo branco, caso contrário, parecerá quebrado, o que é muito feio. .

tamanho da tela do iPhone

A diferença de tamanho entre o iPhoneX e outros modelos

A razão para o problema acima é que o iPhoneX possui uma área segura. A área segura refere-se a uma faixa visual da janela. O conteúdo na área segura não é afetado pelos cantos, caixa do sensor e indicador inicial, a área azul na figura abaixo. :

Ou seja, se quisermos nos adaptar bem, devemos garantir que a área visível e operável da página esteja dentro da área segura.

Para dimensões específicas, consulte Diretrizes de Interface Humana – iPhoneX

O primeiro passo é definir o layout da página web na janela visual

 <meta name=viewport content=width=device-width, viewport-fit=cover>

Um novo recurso do iOS11. Para se adaptar ao iPhoneX, a Apple estendeu a meta tag da janela de visualização existente para definir o layout da página da web na janela visual.

• contém: A janela visual contém completamente o conteúdo da página da web (imagem à esquerda)
• capa: o conteúdo da página da web cobre completamente a janela visual (imagem à direita)
• auto: valor padrão, consistente com contém

Nota: A página web que não adiciona extensões por padrão é viewport-fit=contain. Se precisar ser adaptada ao iPhoneX, viewport-fit=cover deve ser definido. Este é um passo fundamental para a adaptação.

Para obter detalhes, consulte: O descritor de ajuste da janela de visualização

Na segunda etapa, o conteúdo principal da página fica limitado à área segura.

 .post { preenchimento: 12px; preenchimento-esquerda: env(área segura-inset-esquerda); preenchimento-esquerda: const(área segura-inset-esquerda); ); preenchimento à direita: const(área segura-inset-direita);}

Um novo recurso do iOS11, uma função CSS do Webkit, é usado para definir a distância entre a área segura e o limite. Existem quatro variáveis ​​predefinidas:

• safe-area-inset-left: A distância entre a área segura e o limite esquerdo
• safe-area-inset-right: distância da área segura até 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

Nota: Alguns navegadores não suportam mais a função constante e usam a função env.

Por padrão, se o cliente manipular a zona de segurança, o efeito será o seguinte:

Depois de usar o atributo viewport-fit=cover de tela cheia:

Mapa da área de segurança:

Renderização após limitar a área segura:

O preenchimento é definido para 12 pixels acima. Se a direção for girada:

A terceira etapa é usar os métodos min() e max()

 @supports(padding: max(0px)) { .post { padding-left: max(12px, env(safe-area-inset-left)); certo)); }} 

Problema corrigido de elemento fixo

Se o título da página for implementado no front-end e fixado na parte superior, ele será bloqueado. Neste momento, você pode definir o valor superior para um valor de distância segura, por exemplo:

 .header{top:env(área segura-inset-top);top:const(área segura-inset-top);}

Artigo de referência: Projetando sites para iPhone X

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.