Análise de tags de viewport e uso de CSS relacionado no desenvolvimento móvel html5

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.

Geralmente, 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.

Visual 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:

A 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)

Unidades 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: