A frente é compatível com garrafa de gota d'água Apple Liu Haiping e Android Liu Haiping
Com a atualização contínua de iOS e Android. Várias adaptações de tela são realmente uma dor de cabeça.
À medida que vários projetos são empacotados em aplicativos, eles ficam online. Sempre encontramos as seguintes situações em alguns telefones de tela inteira. 1, 3 são condições normais (iphone11 Weibo), 2 e 4 são problemas de adaptação (determinado aplicativo iphone11). O Android também terá esse problema. Para esse problema, nós são desconfortáveis no front-end. Abaixo, fornecemos uma solução para esse problema.
Na verdade, w3c há muito nos fornece uma solução (CSS3 novo recurso viewport-fit)
Na norma sobre exibição redonda fornecida por w3c.org, é mencionado o atributo de ajuste da janela de visualização.Este atributo indica como o navegador deve realizar o ajuste da janela de visualização para alguns dispositivos com uma tela que não é uma tela retangular. Transmissão LOL: documento de referência oficial de ajuste da janela de visualização
CSS3 novos recursos env e var variáveis predefinidas.
Depois de definir a correção da janela de visualização, o navegador irá gerar automaticamente quatro variáveis de preenchimento, que são usadas para comprimir a página para dentro para uma posição onde ela possa ser exibida normalmente. Neste momento, você precisa usar env ou constante para converter variáveis em valores de propriedade CSS e atribuí-los às propriedades. ps: env parece estar em desenvolvimento, mas suporta apenas IOS 11.2 e superior. O método mais seguro atual é usar constante e env juntos. Transmissão LOL: descrição das variáveis env e var
Abordagem detalhada
| O valor do ajuste da janela de visualização é o seguinte: | |
|---|---|
| auto | Padrão: viewprot-fit: contain; o conteúdo da página é exibido na área segura |
| cobrir | ajuste da janela de visualização: capa, conteúdo da página preenche a tela |
Em primeiro lugar, adicionamos este atributo
viewport-fit = cover "(o código mais importante é, pode haver problemas se o código abaixo não for adicionado)
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
/* body 在横屏底下和竖屏底下一定要做好定位，不然*/
/* 竖屏底下的查询 */
@media screen and (orientation: portrait) {
body {
/* 防止页面被刘海遮住 */
padding-top: constant(safe-area-inset-top);
//以防万一写一个你本身适配其他手机的
padding-top:0px;
}
}
/* 横屏底下的查询 */
@media screen and (orientation: landscape) {
body {
/* IOS 11支持*/
padding-right: constant(safe-area-inset-right);
padding-left: constant(safe-area-inset-left);
padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px
/*IOS 11.2版本版本支持*/
padding-right: env(safe-area-inset-right);
padding-left: env(safe-area-inset-left);
padding-bottom: env(safe-area-inset-bottom);
//以防万一写一个你本身适配其他手机的
padding-right:0px;
padding-left:0px;
padding-bottom:0px;
}
}
如果用header和footer请单独定义