Compatibilidade com diferentes telas em apps da Web

Como o Android está disponível para dispositivos com diversos tamanhos de tela e densidades de pixel, você precisa considerar esses fatores no seu design para que as páginas sempre apareçam com o tamanho adequado. O WebView é compatível com os recursos DOM, CSS e metatag para ajudar você a garantir que o conteúdo da Web seja processado adequadamente.

Ao criar páginas da Web especificamente para dispositivos Android, você precisa considerar dois fatores principais:

A janela de visualização
A janela de visualização é a área retangular que fornece uma região em que as informações da página da Web são exibidas. Você pode especificar várias propriedades da janela de visualização, como o tamanho e a escala inicial. O mais importante é a largura da janela de visualização, que define o número total de pixels horizontais disponíveis no ponto de visualização da página da Web, ou seja, o número de pixels CSS disponíveis.
A densidade da tela
A classe WebView e a maioria dos navegadores da Web no Android convertem os valores de pixel CSS para valores de pixel de densidade independente. Assim, a página da Web aparecerá com o mesmo tamanho perceptível de uma tela de densidade média (cerca de 160 dpi). No entanto, se os elementos gráficos forem um elemento importante do design, preste atenção no dimensionamento que ocorre em diferentes densidades. Uma imagem de 300 px de largura em uma tela de 320 dpi será escalonada verticalmente, usando mais pixels físicos por pixel CSS, o que pode produzir artefatos como desfoque e pixelização. Para simplificar, o Android recolhe a maior parte das densidades de tela menores em algumas categorias gerais: pequena, média e grande. Para saber mais sobre densidades de tela, leia este treinamento sobre densidades de tela.

Confira os seguintes recursos relacionados:

Como especificar propriedades da janela de visualização

A janela de visualização é a área em que a página da Web é desenhada. Embora a área visível total da janela de visualização corresponda ao tamanho da tela quando o zoom é totalmente retirado, a janela de visualização tem as próprias dimensões em pixels disponíveis para uma página da Web. Por exemplo, embora uma tela de dispositivo possa ter uma largura física de 480 pixels, a janela de visualização pode ter uma largura de 800 pixels. Isso permite que uma página da Web projetada em 800 pixels de largura seja completamente visível na tela quando a escala da janela de visualização for de 1,0. A maioria dos navegadores da Web no Android, incluindo o Google Chrome, define por padrão a janela de visualização como um tamanho grande, conhecido como "modo de janela de visualização ampla", com cerca de 980 px de largura. Muitos navegadores também diminuem o zoom o máximo possível, por padrão, para mostrar a largura total da janela de visualização, conhecido como "modo de visão geral".

Observação: quando a página é renderizada em uma WebView, ela não usa o modo de janela de visualização ampla (página com zoom total) por padrão. Você pode ativar o modo de janela de visualização ampla com setUseWideViewPort().

Você pode definir propriedades da janela de visualização para sua página da Web, como a largura e o nível de zoom inicial, usando a tag <meta name="viewport" ...> no documento <head>.

A sintaxe a seguir mostra todas as propriedades disponíveis na janela de visualização, além dos tipos de valores aceitos por cada uma delas:

    <meta name="viewport"
          content="
              height = [pixel_value | "device-height"] ,
              width = [pixel_value | "device-width"] ,
              initial-scale = float_value ,
              minimum-scale = float_value ,
              maximum-scale = float_value ,
              user-scalable = ["yes" | "no"]
              " />
    

Por exemplo, a tag <meta> a seguir especifica que a largura da janela de visualização precisa corresponder exatamente à largura da tela do dispositivo, e que a capacidade de zoom precisa ser desativada:

    <head>
        <title>Example</title>
        <meta name="viewport" content="width=device-width, user-scalable=no" />
    </head>
    

Ao otimizar o site para dispositivos móveis, defina a largura como "device-width" para que o tamanho caiba exatamente em todos os dispositivos. Depois disso, use consultas de mídia CSS para adaptar os layouts de acordo com diferentes tamanhos de tela.

Observação: desative o dimensionamento do usuário apenas quando tiver certeza de que o layout da página da Web é flexível e que o conteúdo caberá na largura de telas pequenas.

Especificar a densidade do dispositivo com CSS

WebView é compatível com um recurso de mídia CSS que permite criar estilos para densidades de tela específicas: o recurso de mídia CSS -webkit-device-pixel-ratio. O valor aplicado a esse recurso precisa ser de "0,75", "1" ou "1,5" para indicar que os estilos são voltados para dispositivos com telas de baixa, média ou alta densidade, respectivamente.

Por exemplo, você pode criar folhas de estilo separadas para cada densidade:

    <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
    <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />
    

Ou especificar os diferentes estilos em uma folha de estilo:

    #header {
        background:url(medium-density-image.png);
    }

    @media screen and (-webkit-device-pixel-ratio: 1.5) {
        /* CSS for high-density screens */
        #header {
            background:url(high-density-image.png);
        }
    }

    @media screen and (-webkit-device-pixel-ratio: 0.75) {
        /* CSS for low-density screens */
        #header {
            background:url(low-density-image.png);
        }
    }
    

Para saber mais sobre como gerenciar diferentes densidades de tela, principalmente com imagens, consulte Imagens de DPI alto para densidades de pixels variáveis (link em inglês).

Especificar a densidade do dispositivo com JavaScript

WebView é compatível com uma propriedade DOM que permite consultar a densidade do dispositivo atual: a propriedade DOM window.devicePixelRatio. O valor dessa propriedade especifica o fator de dimensionamento usado para o dispositivo atual. Por exemplo, se o valor de window.devicePixelRatio for "1,0", o dispositivo será considerado de densidade média, e nenhum redimensionamento será aplicado por padrão. Se o valor for "1,5", o dispositivo será considerado de alta densidade, e a página será dimensionada em 1,5x por padrão. Se o valor for "0,75", o dispositivo será considerado de baixa densidade, e a página será dimensionada em 0,75x por padrão. Obviamente, o dimensionamento que o navegador do Android e a WebView aplicam é baseado na densidade almejada da página da Web. Como descrito na seção sobre Como especificar a densidade almejada da janela de visualização, a densidade almejada é a média, mas você pode modificar isso para mudar a forma como sua página da Web é dimensionada em diferentes densidades de tela.

Por exemplo, veja como consultar a densidade do dispositivo com JavaScript:

    if (window.devicePixelRatio == 1.5) {
      alert("This is a high-density screen");
    } else if (window.devicePixelRatio == 0.75) {
      alert("This is a low-density screen");
    }