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, levar em consideração esses fatores em seu web design para que suas páginas tenham o tamanho adequado. WebView é compatível com DOM, CSS e metatag para ajudar você a renderizar seu conteúdo da Web de maneira adequada.

Ao segmentar suas páginas da Web para dispositivos com tecnologia Android, há dois fatores principais a considerar para:

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 tamanho e escala inicial. O mais importante é largura da janela de visualização, que define o número total de pixels horizontais disponíveis no tamanho de um ponto de vista: 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 seus valores de pixel CSS para valores de pixels de densidade independente, de modo que sua página da Web tenha o mesmo tamanho perceptível que um tela de média densidade (cerca de 160 dpi. No entanto, se os gráficos forem um elemento importante do seu e web design, preste atenção à escala que ocorre em diferentes densidades. Por exemplo, uma imagem que tem 300 px de largura em uma tela de 320 dpi é ampliada. Ela usa mais pixels físicos por CSS pixelado. Isso pode produzir artefatos como desfoque e pixelização. Para simplificar, o Android fecha a maioria das densidades de tela menores em algumas categorias gerais: pequeno, médio e grande. Para saber mais sobre a densidade da tela, leia Ofereça suporte a densidades de pixel diferentes.

Confira estes recursos relacionados:

Especificar propriedades da janela de visualização

A janela de visualização é a área em que a página da Web é desenhada. Embora o tamanho total da janela de visualização corresponde ao tamanho da tela quando o zoom é totalmente reduzido, a janela de visualização tem seu próprio pixel que ele 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 a 800 pixels de largura para ser completamente visível na tela quando a escala da janela de visualização for 1,0.

Mais frequentes navegadores da Web no Android, incluindo o Chrome, definem a janela de visualização como um tamanho grande por padrão. Este _modo de janela de visualização larga_ tem cerca de 980 px de largura. Muitos navegadores também diminuem o zoom possível por padrão para mostrar a largura total da janela de visualização, conhecida como _overview_mode_.

Defina propriedades da janela de visualização para sua página da Web, como largura e zoom inicial. usando a tag <meta name="viewport" ...> no seu documento <head>.

A sintaxe a seguir mostra todas as propriedades compatíveis da janela de visualização e os tipos de valores aceitos por cada um:

<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 corresponde a largura da tela do dispositivo e que a capacidade de zoom está desativada:

<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 de maneira flexível para se adequarem a diferentes tamanhos de tela.

Densidade do dispositivo de destino com CSS

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

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 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 mais informações sobre como lidar com diferentes densidades de tela, especialmente imagens, consulte Imagens com DPI alto para densidades de pixel variáveis.

Especificar a densidade do dispositivo com JavaScript

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

O dimensionamento que o navegador Android e a WebView aplicam é baseado no nível densidade desejada. Como descrito na seção Como definir a janela de visualização a densidade desejada, que por padrão será a média, mas é possível alterá-la para afetar como sua 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");
}