tamanho da tela
O resumo das dimensões de desenvolvimento da série iPhone que conhecemos é o seguinte:
△Tamanho de desenvolvimento de cada modelo de iPhoneConverta para o tamanho de pixel conhecido:
△Dimensões multidimensionais de cada modeloO mapa de ampliação é na verdade a relação de ampliação entre o tamanho do pixel e o tamanho do desenvolvimento, mas esta é apenas uma manifestação externa. O principal fator que influencia a ampliação é o PPI (DPI). Compreender a relação entre a densidade da tela e os vários tamanhos nos ajudará a compreender profundamente o conceito de ampliação: "Aprenda o básico! Guia DPI feito sob medida para designers》
Nesta atualização, o tamanho e a resolução da tela do iPhone8 herdaram as boas tradições do iPhone6 e posteriores;
No entanto, o iPhone X passou por grandes mudanças em termos de tamanho, resolução e até formato da tela. Vamos tomar o iPhone 8 como referência para ver como devemos considerar a adaptação do iPhone X.
Vamos dar uma olhada nas mudanças no tamanho do iPhone X:
2. Adaptação do iPhoneX --- área segura (área segura)As opiniões da Apple sobre o layout do design do iPhone X são as seguintes:
O conteúdo principal deve estar na área segura para garantir que não seja obscurecido pelos cantos arredondados (cantos) do dispositivo, pela caixa do sensor (caixa do sensor, franja completa) e pelo indicador inicial na parte inferior. Em outras palavras, o conteúdo que projetamos exibir deve estar dentro da área segura, tanto quanto possível;
3. Adaptação do iPhoneX --- Esquema de adaptação viewport-fit 3.1 Adaptação do PhoneX, a meta tag de viewport-fit é usada como esquema de adaptação no iOS 11, o valor padrão de viewport-fit é automático;O valor de viewport-fit é o seguinte:
| auto | Padrão: viewprot-fit:contain; o conteúdo da página é exibido na área segura |
| cobrir | viewport-fit:cover, o conteúdo da página preenche a tela |
configuração de meta tag viewport-fit (ao cobrir)
<nome meta = conteúdo da janela de visualização = largura = largura do dispositivo, escala inicial = 1,0, escala mínima = 1,0, escala máxima = 1,0, escalonável pelo usuário = não, ajuste da janela de visualização = capa>
3.2 Introdução à função css constante() e safe-area-inset-top &safe-area-inset-left &safe-area-inset-right &safe-area-inset-bottom
Conforme mostrado acima, o WebKit no iOS 11 inclui uma nova função CSS constante() e um conjunto de quatro constantes predefinidas: área segura-inset-esquerda, área segura-inset-direita, área segura -inset-top e seguro -área-inserção-inferior. Quando combinados, permite que os estilos façam referência ao tamanho da área segura de cada aspecto.
3.1 Quando definimos viewport-fit:contain, que é o tempo padrão, definimos safe-area-inset-left, safe-area-inset-right, safe-area-inset-top e safe-area-inset-bottom, etc. Os parâmetros não têm efeito.
3.2 Quando definimos viewport-fit:cover: as configurações são as seguintes
body { padding-top: constante(safe-area-inset-top); //A altura da barra de navegação + barra de status é 88px padding-left: constante(safe-area-inset-left); não é vertical É 0 padding-right: constante(safe-area-inset-right); //Se a tela não for vertical, é 0 padding-bottom: constante(safe-area-inset-bottom); //A altura do arco inferior é 34px } 4. Adaptação do iPhoneX --- estatísticas de alturaviewport-fit:capa + barra de navegação
5. Adaptação do iPhoneX --- consulta de mídiaObserve que 690px (altura da área segura) é usado aqui, não 812px;
@media only screen and (largura: 375px) e (altura: 690px){ body { background: blue }}; 6.ajuste à janela de visualização do iphoneX Resumo do problema1. Quando a página iphoneX usa cores gradientes; if viewport-fit:cover;
1.1 A diferença entre uma cor única e uma cor gradiente é definida quando a cor de fundo é definida. Se for uma cor única, ela preencherá a tela inteira. Se uma cor gradiente for definida, ela será renderizada apenas na altura de. o elemento filho; e a altura da página é de apenas 690px. Use o padding-top:88px acima;
O corpo está fixado em:
<body><div class=content>este é o subElement</div></body>
1. Quando monocromático:
* { preenchimento: 0; margem: 0; } corpo { background:green; constante(safe-area-inset-top); );*/ /*padding-right: constante(safe-area-inset-right);*/ /*padding-bottom: constante(safe-area-inset-bottom);*/ }2. Cor gradiente
* { preenchimento: 0; margem: 0; } corpo { background:-webkit-gradient(linear, 0 0, 0 inferior, from(#ffd54f), to(#ffaa22)); -inset-top); //88px /*padding-left: constante(safe-area-inset-left);*/ /*padding-right: constante(área segura-inset-right);*/ /*padding-bottom: constante(área segura-inset-bottom);*/ }Como resolver o problema de usar cores gradientes para preencher toda a tela As configurações de CSS são as seguintes;
<!DOCTYPE html><html><head> <meta name=viewport content=initial-scale=1, viewport-fit=cover> <title>Projetando sites para iPhone X: respeitando as áreas seguras</title> <style> * { preenchimento: 0; margem: 0; } html, corpo { altura: 100% } corpo { preenchimento-topo: constante (área segura-inset-topo); constante (área segura inserida à esquerda); preenchimento à direita: constante (área segura inserida à direita); gradiente(linear, 0 0, 0 inferior, from(#ffd54f), to(#ffaa22)); </style></head><body><div class=content>este é subElement</div></body></html>2. O elemento da página usa adaptação de posicionamento fixo: {position:fixed;}
2.1 Quando a página do elemento filho é fixada na parte inferior; ao usar viewport-fit:contain você pode ver que quando bottom:0 for exibido, ele será exibido apenas na área segura;
<!DOCTYPE html><html><head> <meta name=viewport content=initial-scale=1> <!--<meta name=viewport content=initial-scale=1, viewport-fit=cover>--> <title>Desenhando sites para iPhone X: Respeitando as áreas seguras</title> <style> * { padding: 0 margin: 0; 100%;*/ /*}*/ body { background: grey; /*padding-top: constante(safe-area-inset-top);*/ /*padding-left: constante(safe-area-inset-left );*/ /*padding-right: constante(safe-area-inset-right);*/ /*padding-bottom: constante(safe-area-inset-bottom);*/ } .top { largura: 100%; altura: 44px; fundo: roxo } .bottom {posição: fundo fixo: 0; esquerda: 0; altura: 44px; head><body> <div class=top>isto é o topo</div> <div class=bottom>este é o fundo</div></body></html>2.1 Quando a página do elemento filho é fixada na parte inferior; ao usar viewport-fit:cover você pode ver que bottom:0 será exibido apenas na área segura;
Adicione html,corpo {largura:100%;altura:100%}
Figura 1:
* { padding: 0; margin: 0; } html,body { height: 100% } body { background: padding-top: constante(safe-area-inset-top); área inserida à esquerda); preenchimento à direita: constante (área segura inserida à direita); preenchimento inferior: constante (área segura inserida inferior); largura: 100%; altura: 44px; fundo: roxo } .bottom {posição: fundo fixo: 0;Figura 2:
* { padding: 0; margin: 0; } html,body { height: 100% } body { background: padding-top: constante(safe-area-inset-top); area-inset-left); preenchimento-direita: constante(safe-area-inset-right); /*padding-bottom: constante(safe-area-inset-bottom);*/ } .top {largura: 100%; altura: 44px; fundo: 44px;2.3 Solução para a camada de máscara pop-up do alertView
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <!--<meta name=viewport content=width=device-width, escala inicial=1,0, escala mínima=1,0 , escala máxima = 1,0, escalonável pelo usuário = não>--> <nome meta = janela de visualização conteúdo=largura=largura do dispositivo,escala inicial=1,0, escala mínima=1,0, escala máxima=1,0, escalonável pelo usuário=não, viewport-fit=capa> <meta http-equiv=pragma content=no-cache > <meta http-equiv=cache-control content=no-cache> <meta http-equiv=expires content=0> <title>alertView</title> <script data-res=eebbk> document.documentElement.style.fontSize = window.screen.width / 7.5 + 'px'; 100%; altura: 100% } corpo {tamanho da fonte: 0,32rem; constante(área segura-inset-top); preenchimento-esquerda: constante(área segura-inset-esquerda); -inset-bottom); } .content { text-align: center; .testBut {margem: 50px largura: 100px altura: 44px; 1px cinza escuro sólido; contorno: nenhum; seleção do usuário: nenhum; cor de fundo: amarelo } </style> <link href=alertView.css rel=stylesheet type=text/css></head><body> <seção class=content> <button class=testBut onclick=showLoading()>Carregamento de pop-up</button> </section> <script type=text/javascript src=alertView.js></script> <script> function showLoading() { UIAlertView.show({ type:input, title: Lembrete caloroso, //Conteúdo do título: A assinatura VIP está prestes a expirar, //Obter novo isKnow: falso }); var xx = new UIAlertView(); ResumirO texto acima é o que o editor apresenta a você sobre a adaptação das páginas HTML5 para iPhoneX. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!