Comentário: Com a popularidade dos telefones celulares de ponta (Andriod, iPhone, iPod, WinPhone, etc.), o desenvolvimento de aplicativos móveis na Internet também está recebendo cada vez mais atenção das pessoas. Usar o HTML5 para desenvolver aplicativos móveis é a melhor escolha. No entanto, cada telefone tem diferentes resoluções e tamanhos de tela. Como o tamanho do aplicativo ou a página desenvolvemos é adequado para uso em vários telefones de ponta? Aprenda viewport html5
Sintaxe da Viewport Introdução:
<!- documento html->
<meta nome = viewport
conteúdo =
altura = [pixel_value | altura do dispositivo],
largura = [pixel_value | largura de dispositivo],
escala inicial = float_value,
escala mínima = float_value,
em escala máxima = float_value,
Scalable do usuário = [Sim | não] ,
Target-densidadeDPI = [dpi_value | dispositivo-dpi | High-DPI | médio-dpi | baixo dpi]
/>
Explicação do parâmetro:
largura
-Controle o tamanho da viewport, que pode ser especificado como um valor ou um valor especial, como a largura do dispositivo, que é a largura do dispositivo (unidades dos pixels do CSS quando escaladas para 100%.
altura
—— Correndo para a largura, especificando a altura.
alvo-densidadeDPI
- A densidade de um pixel de tela é determinada pela resolução da tela e geralmente é definida como o número de pontos por polegada (DPI). O Android suporta três densidade de pixels de tela: baixa densidade de pixels, densidade de pixels médios e alta densidade de pixels. Uma tela de baixa densidade de pixels tem menos pixels por polegada, enquanto uma tela de densidade de pixels alta possui mais pixels por polegada. O navegador Android e o WebView têm uma densidade média de pixels por padrão.
Abaixo está o intervalo de valor do atributo alvo-densidadeDPI
Dispositivo-DPI: use o DPI original do dispositivo como DP de destino. O zoom padrão não ocorre.
High-DPI: use o HDPI como DPI de destino. Os dispositivos de densidade de pixels médios e baixos são reduzidos de acordo.
Medium-DPI: Use o MDPI como DPI de destino. O dispositivo de alta densidade de pixels é aumentado de acordo e o dispositivo de densidade de pixels é reduzido de acordo. Esta é a densidade de destino padrão.
BOW-DPI: Use o MDPI como DPI de destino. Os dispositivos de densidade de pixels médios e alta são amplificados de acordo.
<Value>: Especifique um valor DPI específico como DPI de destino. O intervalo desse valor deve estar entre 70 e 400.
<!- documento html->
<meta nome = conteúdo da viewport = Target-densityDpi = dispositivo-dpi />
<meta nome = conteúdo da viewport = destino-densidadeDPI = High-dpi />
<meta nome = conteúdo da viewport = destino-densidadeDPI = médio-dpi />
<meta nome = conteúdo da viewport = Target-densityDpi = Low-dpi />
<meta nome = conteúdo da viewport = Target-densityDpi = 200 ″ />
Para impedir que o navegador Android e o WebView escalonem suas páginas com base na densidade de pixels de telas diferentes, você pode definir o alvo-densidadeDPI da viewport para o dispositivo-DPI. Quando você faz isso, a página não será escalada. Em vez disso, a página é exibida com base na densidade de pixels da tela atual. Nesse caso, você também precisa definir a largura da viewport para corresponder à largura do dispositivo para que sua página possa se adaptar à tela.
escala inicial
—— Escala inativa. Isto é, o nível inicial de zoom da página. Este é um valor de ponto flutuante, um multiplicador do tamanho da página. Por exemplo, se você definir a escala inicial como 1.0, a página da web será exibida com uma resolução 1: 1 da densidade de destino. Se você o definir como 2.0, esta página será ampliada para 2x.
escala máxima
—— MAIMUM ZOOM. Esse é o grau máximo permitido de escala. Este também é um valor de ponto flutuante que indica o multiplicador máximo do tamanho da página em comparação com o tamanho da tela. Por exemplo, se você definir esse valor para 2.0, esta página poderá ser aumentada até 2 vezes em comparação com o tamanho do alvo.
Scalable
- User ajusta o zoom. Ou seja, se o usuário pode alterar o nível de zoom da página. Se definido como sim, o usuário permitirá que ele altere, caso contrário, não é. O valor padrão é sim. Se você o definir como não, tanto a escala mínima quanto a escala máxima serão ignoradas porque a escala simplesmente não é possível.
Todos os valores de escala devem estar dentro da faixa de 0,01 a 10.
Exemplo: 1. Defina a largura da tela como a largura do dispositivo, proibindo os usuários de ajustar manualmente o zoom
<meta nome = conteúdo da viewport = width = largura do dispositivo, scalable usuário = não />
2. Defina a densidade da tela para escala automática de alta frequência, média frequência e baixa frequência e proíbe os usuários de ajustar manualmente a escala
<meta nome = conteúdo da viewport = largura = largura do dispositivo, destino-densidadeDPI = High-DPI, escala inicial = 1,0, escala mínima = 1,0, escala máxima = 1,0, escalável do usuário = não/>