Este artigo apresenta principalmente a tag de viewport e a análise de uso do CSS relacionada no desenvolvimento móvel HTML5. A viewport é frequentemente chamada de viewport ou viewport e desempenha um papel importante no layout móvel e na adaptação da tela. Amigos que precisam podem se referir a ele.
A viewport (viewport) comumente mencionada no front-end móvel é a área de tela em que o navegador exibe o conteúdo da página. Vários conceitos importantes envolvidos são a relação entre DIP (pixels de lógica de dispositivo de pixel independente do dispositivo) e pixels CSS. Aqui, primeiro entendemos os seguintes conceitos.
Viewport de layoutGeralmente, os navegadores em dispositivos móveis definem uma meta tag de viewport por padrão, definindo uma viewport de layout virtual para resolver o problema da exibição inicial da página em telefones celulares. O iOS e o Android basicamente definem a resolução dessa viewport para 980px, para que as páginas da web no PC possam ser apresentadas basicamente no telefone, mas os elementos parecem muito pequenos e as páginas da web geralmente podem ser escaladas manualmente por padrão.
Viewport visual e pixels físicosVisual Viewport (Visual Viewport) fornece a área visual da tela física, os pixels físicos da tela da tela, o mesmo tamanho da tela, o dispositivo com alta densidade de pixels e os pixels de hardware serão mais. Por exemplo, os pixels físicos do iPhone:
iPhone5: 640 * 1136
iPhone 6: 750 * 1334
iPhone6 Plus: 1242 * 2208
Viewpport ideal e DIP (lógica de dispositivo Pixels)
Viewport ideal é geralmente o que chamamos de resolução da tela.
DIP (lógica do dispositivo Pixel) não tem nada a ver com o pixel de hardware do dispositivo. Um mergulho ocupa o mesmo espaço em uma tela de dispositivo de qualquer densidade de pixels.
Por exemplo, os pixels de hardware da exibição da tela da retina do MacBook Pro são: 2880 * 1800. Quando você define a resolução da tela para 1920 * 1200, o valor de largura da viewport ideal é de 1920 pixels e o valor de largura do mergulho é 1920. A razão pixel do dispositivo é de 1,5 (2880/1920). A relação entre a largura lógica do pixel e a largura física do pixel (resolução de pixels) do dispositivo satisfaz a seguinte fórmula:
Largura de pixel lógica *ampliação = largura física do pixelA resolução da tela do telefone celular geralmente não é permitida. Geralmente é um valor fixo definido pelo fabricante do dispositivo por padrão. Em outras palavras, o valor do mergulho é o valor da viewport ideal (ou seja, resolução). Por exemplo, a resolução da tela do iPhone:
iPhone5: Resolução 320*568, pixels físicos 640*1136, @2x
iPhone6: Resolução 375*667, pixels físicos 750*1334, @2x
iPhone6 Plus: Resolução 414 * 736, Pixels físicos 1242 * 2208, @3x (Observe que a taxa de imagem exibida real é reduzida para 1080 × 1920, os motivos específicos serão introduzidos no final do nosso artigo)
CSS PixelsUnidades CSS Pixels (PX) usadas para o layout da página. O tamanho do pixel do estilo (por exemplo, largura: 100px) é especificado nos pixels CSS. A proporção de pixels CSS para MIP é a taxa de escala da página da web. Se a página da web não estiver escalando, um pixel CSS corresponde a um DIP (lógica do dispositivo Pixel).
Use a meta tag de viewport para controlar o layout
Primeiro, vamos dar uma olhada nas propriedades extremas da meta tag de viewport:
CSS Code Copy Content para a área de transferência