Suporte a diferentes telas em apps da Web

Como o Android está disponível em dispositivos com diversos tamanhos de tela e densidades de pixel, considere esses fatores no seu web design para que suas páginas tenham o tamanho adequado. O WebView é compatível com recursos DOM, CSS e metatags para ajudar você a renderizar seu conteúdo da Web de maneira adequada.

Ao segmentar páginas da Web para dispositivos Android, há dois fatores principais a serem considerados:

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. É possível 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 do ponto de vista 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 em valores de pixels de densidade independente, fazendo com que sua página da Web tenha o mesmo tamanho perceptível que uma tela de média densidade (cerca de 160 dpi). No entanto, se os elementos gráficos forem um elemento importante do design da Web, preste atenção ao dimensionamento que ocorre em diferentes densidades. Por exemplo, uma imagem com 300 px de largura em uma tela de 320 dpi é dimensionada, usando mais pixels físicos por pixel CSS. Isso pode produzir artefatos como desfoque e pixelização. Para simplificar, o Android reúne a maioria das densidades de tela menores em algumas categorias gerais: pequena, média e grande. Para saber mais sobre a densidade da tela, leia Suporte para densidades de pixel diferentes.

Confira estes recursos relacionados:

Especificar as 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 afastado, a janela de visualização tem as próprias dimensões de pixel que disponibiliza para uma página da Web. Por exemplo, embora a tela de um 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 Chrome, define um tamanho grande para a janela de visualização por padrão. Este _modo janela de visualização larga_ tem cerca de 980 px de largura. Muitos navegadores também diminuem o zoom o máximo possível por padrão para mostrar toda a largura da janela de visualização, conhecida como _overview mode_.

Você pode definir as propriedades da janela de visualização da 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 da janela de visualização compatíveis e os tipos de valores aceitos por cada uma:

<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> abaixo especifica que a largura da janela de visualização corresponde à largura da tela do dispositivo e que o recurso de zoom está desativado:

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

Ao otimizar seu site para dispositivos móveis, você geralmente define a largura como "device-width" para que o tamanho caiba exatamente em todos os dispositivos. Em seguida, use consultas de mídia CSS para adaptar os layouts a diferentes tamanhos de tela de maneira flexível.

Densidade do dispositivo de destino com CSS

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

É possível 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 especifique 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 processar diferentes densidades de tela, especialmente imagens, consulte Imagens com DPI alto para densidades de pixel variáveis.

Densidade do dispositivo de destino com JavaScript

WebView oferece suporte a window.devicePixelRatio, que é uma propriedade DOM que permite consultar a densidade do dispositivo atual. O valor dessa propriedade especifica o fator de escalonamento usado para o dispositivo atual. Se o valor de window.devicePixelRatio for 1,0, o dispositivo será considerado de densidade média e nenhum dimensionamento será aplicado por padrão. Se o valor for 1,5, o dispositivo será considerado de alta densidade, e a página será dimensionada 1,5x por padrão. Se o valor for 0,75, o dispositivo será considerado de baixa densidade, e a página será escalonada 0,75x por padrão.

O dimensionamento que o navegador Android e o WebView aplicam é baseado na densidade de destino da página da Web. Conforme descrito na seção Como definir a densidade de destino da janela de visualização, o destino padrão é a densidade média, mas é possível alterar essa opção para afetar a forma como a página da Web é dimensionada para 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");
}