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:
- IU Pixel-Perfect no modo WebView (link em inglês)
- Conheça o design responsivo
- Imagens com DPI alto para densidades de pixel variáveis
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"); }