Vamos dar uma olhada na aparência do modelo do iPhone X primeiro
Na imagem acima, o modelo Iphonex possui essas duas novas áreas na cabeça e na parte inferior, portanto precisamos fazer algumas adaptações para esse tipo de modelo para facilitar a exibição do nosso webapp.
Para páginas móveis feitas de h5, o layout comum é o modo cabeça + torso + fundo de três colunas. A cabeça e a parte superior são posicionadas fixamente e o conteúdo no torso pode ser rolado.
<div class=page> <header></header> <main></main> <footer></footer> </div>
Porém, se você não usar os novos atributos css do Iphone Nesta situação, a barra de navegação na parte inferior fica bloqueada pela luz de respiração que vem com o Iphone Verifiquei várias soluções
Estou usando a estrutura vue. Na página index.html, precisamos adicionar.
<meta name=viewport content=width=device-width,viewport-fit=cover>
Em seguida, na página pública app.vue, a exibição de cada um de nossos componentes é substituída por router-view aqui, para que a barra de cabeçalho pública possa ser processada aqui.
<template><div id=app><div class=placeholder_top :style={position:fixpositiona?'absolute':'fixed'}></div><router-view class=routerview></router-view>< /div></template>No layout acima, escrevemos o seguinte para o div com a classe placeholder_top:
.placeholder_top {posição: topo fixo: 0; largura: 10rem cor de fundo: #303030; ); índice z: 999;}Neste caso, não teremos mais que lidar com o problema da barra superior para componentes separados no futuro. Em seguida, podemos lidar com o problema do cabeçalho mencionado anteriormente. Geralmente, a maioria dos cabeçalhos será encapsulada em componentes públicos. Aqui, devido à influência do elemento que inserimos na página app.vue, o método de escrita CSS do nosso head também precisa ser ligeiramente modificado. O layout da página do componente head é o seguinte:
<template><header> <div class=title :style={position:fixposition?'absolute':'fixed'}> Conteúdo de navegação</div> <div class=placeholder></div> </header></ modelo>O css da página é:
cabeçalho{cor de fundo: #303030; .title{ posição: fixo superior:0; constante(área segura-inset-top); altura: 88px; índice z: 999 } .placeholder{ altura: 88px;Escrito assim, a barra de navegação principal estará localizada sob a barra de status do telefone celular, não afetará a janela e é compatível com os modelos Android e iOS (tais problemas de compatibilidade também envolvem problemas de sistema com iOS, mas este artigo ainda não envolvido)
Agora vamos dar uma olhada no processamento da área principal. Como o componente do cabeçalho acima foi processado, o layout principal é o seguinte:
main {padding-top: constante(safe-area-inset-top);padding-top: env(safe-area-inset-top);padding-bottom: calc(88px + constante(safe-area-inset-bottom) );padding-bottom: calc(88px + env(safe-area-inset-bottom));ps: Deixe-me explicar aqui. As duas linhas a seguir são usadas quando a página atual não possui uma barra de navegação inferior.
padding-bottom: constante(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);},
O layout principal está pronto, basta escrever o conteúdo diretamente.
Em seguida, observe o layout do rodapé na parte inferior
<template><footer> <div class=foot :style={position:fixposition?'absolute':'fixed'}> Conteúdo inferior</div></footer></template>O css do conteúdo inferior é o seguinte:
rodapé{ posição: fixo; 0; esquerda: 0; largura: 10rem altura: calc(88px + constante(safe-area-inset-bottom)); inferior)); cor de fundo: #303030; .foot{ posição: topo absoluto: 0; 88px;}}Escrito desta forma, o conteúdo do pé de navegação inferior não será bloqueado pela luz respiratória que acompanha o telefone.
Portanto, podemos resumir que o método de escrita CSS que precisaremos usar neste tipo de adaptação de webapp é o seguinte:
posição: fixa superior: constante (área segura inserida superior): env (área segura inserida inferior); -inset-bottom); superior: calc(1rem + constante(safe-area-inset-top)); calc(1rem + constante(área segura-inset-bottom)); calc(1rem + env(área segura-inset-bottom));
ps: No texto acima está escrito: style={position:fixposition?'absolute':'fixed'} Isso é para resolver o problema de posicionamento impreciso de tais elementos fixos quando o usuário clica na caixa de entrada e no botão. o teclado virtual aparece. Se você estiver interessado, você pode estudá-lo. Este artigo não discutirá isso por enquanto.
Diferentes métodos de escrita podem ser usados aqui de acordo com as necessidades reais. É recomendado não se desviar muito da lógica geral do layout. Além disso, é escrito desta forma para processamento unificado e manutenção conveniente. causada pela compatibilidade de layout, a depuração de máquina real pode ser usada. O método é usar o navegador do PC para depurar o aplicativo da web e revisar os elementos. Isso pode basicamente resolver a maioria dos problemas de estilo. Escreverei sobre depuração de máquina real na próxima vez.
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.