Comentário: O uso do 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?
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? Aprender o uso da viewport html5 pode ajudá -lo a fazer isso ...
Sintaxe da Viewport Introdução:
<!-documento html->
<meta
content = "
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]
"
/>
largura
Controla 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
Correspondente à largura, especifique a altura.
alvo-densidadeDPI
A densidade de pixels de uma 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
Device-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. Este valor deve variar de 70 a 400.
<!-documento html->
<meta content = "Target-densidadeDPI = dispositivo-dpi" />
<meta content = "Target-densidadeDPI = High-DPI" />
<meta content = "Target-densidadeDPI = médio-dpi" />
<meta content = "Target-densidadeDPI = Low-DPI" />
<meta content = "Target-densidadedpi = 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 inicial. 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
Zoom máximo. 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
O usuário 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:
(Defina a largura da tela como a largura do dispositivo e proíba os usuários de ajustar manualmente o zoom)
<meta nome = conteúdo da viewport = width = largura do dispositivo, scalable usuário = não />
(Defina a densidade da tela para ampliar automaticamente em alta frequência, média frequência e baixa frequência e proibir os usuários de ajustar manualmente o zoom)
<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/>