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
Como se adaptar?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.
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);} função constanteUm 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:
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.