A chave para a adaptação do IphoneX é como adaptar a página aos entalhes, à área operacional inferior e aos grandes cantos arredondados.
Comparado com outros celulares, a diferença entre o IphoneX é que embora o aparelho também tenha uma tela, na verdade ele é dividido em vários módulos. Veja mais detalhes na figura abaixo:
Quando movemos uma página da web normal para X, o efeito é que o conteúdo é exibido apenas na área segura e não há conteúdo da web na área não segura. Isso significa que blocos brancos aparecerão na parte superior e inferior. lidar com isso?
Solução 1. Adicione uma cor de fundo ao corpoPor que adicionar cor de fundo? Qual é a utilidade? Observe que haverá manchas brancas na cabeça e na parte inferior que acabamos de mencionar. Na verdade, não é correto dizer que é branco, porque essa cor na verdade vem da cor de fundo do corpo. Além disso, quando puxamos para cima ou para baixo o conteúdo, o conteúdo e a cor da parte inferior da página da web serão exibidos, que na verdade é a cor de fundo do corpo. Portanto, se quiser modificar esses dois efeitos, você pode definir a cor de fundo do corpo.
2. Adicione a tag <meta> de viewport-fit = coverEsta etapa é extremamente crítica. Vamos dar uma olhada nos resultados primeiro:
Copiar código