Como Android está disponible en dispositivos con diferentes tamaños de pantalla y densidad de píxeles, debes tener en cuenta estos factores en el diseño web para que tus páginas se muestren siempre en el tamaño adecuado. WebView admite funciones de DOM, CSS y metaetiquetas para ayudarte a garantizar que el contenido web se renderice de manera adecuada.
Cuando desarrollas páginas web para dispositivos Android, debes tener en cuenta dos factores importantes:
- Viewport
- El viewport es el área rectangular que proporciona una región para elementos de diseño a tu página web. Puedes especificar varias propiedades del viewport, como el tamaño y la escala inicial. Lo más importante es el ancho del viewport, que define la cantidad total de píxeles horizontales disponibles desde el punto de vista de la página web (la cantidad de píxeles de CSS disponibles).
- Densidad de la pantalla
- La clase
WebViewy la mayoría de los navegadores web en Android convierten tus valores de píxeles de CSS en valores de píxeles independientes de la densidad, por lo que la página web se percibe del mismo tamaño que una pantalla de densidad media (aproximadamente 160 dpi). Sin embargo, si los gráficos son un elemento importante de tu diseño web, deberás prestar mucha atención a las escalas que se apliquen con diferentes densidades, ya que una imagen de 300 píxeles en una pantalla de 320 dpi se ampliará (se usarán más píxeles físicos por píxel de CSS), lo que puede generar efectos tales como desenfoque y pixelado. Para mayor simplicidad, Android contrae la mayoría de las densidades de pantalla más pequeñas en pocas categorías generales: pequeña, mediana y grande. Para obtener más información acerca de la densidad de la pantalla, consulta la capacitación sobre densidades de pantalla.
Consulta los siguientes recursos relacionados:
- IU de Pixel Perfect en WebView
- Cómo crear un diseño web responsivo pensado para dispositivos móviles
- Imágenes con valores altos de DPI para densidades de píxeles variables
Cómo especificar las propiedades del viewport
El viewport es el área en la que se dibuja la página web. Aunque el área visible total del viewport coincide con el tamaño de la pantalla cuando se aleja totalmente, el viewport tiene sus propias dimensiones en píxeles que pone a disposición de una página web. Por ejemplo, aunque la pantalla de un dispositivo tenga un ancho físico de 480 píxeles, el viewport puede tener un ancho de 800 píxeles. Esto permite que una página web diseñada en 800 píxeles de ancho sea completamente visible en la pantalla cuando la escala del viewport es de 1.0. La mayoría de los navegadores web en Android (incluido Chrome) configuran el viewport en un tamaño grande de forma predeterminada (lo que se conoce como "modo ampliado de viewport", de alrededor de 980 px de ancho). Muchos navegadores también alejan el contenido lo más posible, de forma predeterminada, para mostrar el ancho completo del viewport (lo que se conoce como "modo de vista general").
Nota: Cuando la página se renderiza en una WebView, no utiliza el modo ampliado de viewport (la página aparece con el zoom completo) de forma predeterminada. Puedes habilitar el modo ampliado de viewport con setUseWideViewPort().
Puedes definir las propiedades del viewport de tu página web, como el ancho y el nivel de zoom inicial, empleando la etiqueta <meta name="viewport" ...> en tu documento <head>.
En el siguiente código, se muestran todas las propiedades del viewport compatibles y los tipos de valores que acepta cada una:
<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 ejemplo, la siguiente etiqueta <meta> especifica que el ancho del viewport debe coincidir exactamente con el ancho de la pantalla del dispositivo y que la capacidad de hacer zoom debe estar inhabilitada:
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
Al optimizar tu sitio para dispositivos móviles, en general debes establecer el ancho en "device-width" para que el tamaño se adapte exactamente a todos los dispositivos. Luego, debes usar las consultas de medios de CSS para adaptar con flexibilidad los diseños a diferentes tamaños de pantalla.
Nota: Inhabilita la opción para que el usuario ajuste la escala solamente si estás seguro de que el diseño de tu página web es flexible y de que el contenido se adaptará al ancho de las pantallas pequeñas.
Cómo contemplar la densidad del dispositivo con CSS
WebView es compatible con una función de medios de CSS que te permite crear estilos para densidades de pantalla específicas: la función de medios -webkit-device-pixel-ratio de CSS. El valor que apliques a esta función debe ser "0.75", "1" o "1.5" a fin de indicar que los estilos son para dispositivos con pantallas de densidad baja, media o alta, respectivamente.
Por ejemplo, puedes crear hojas de estilo diferentes para cada densidad:
<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" />
O bien, especifica los distintos estilos en una sola hoja:
#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 obtener más información sobre cómo manejar las diferentes densidades de pantalla, en especial con las imágenes, consulta el artículo Imágenes con valores altos de DPI para densidades de píxeles variables.
Cómo contemplar la densidad del dispositivo con JavaScript
WebView es compatible con una propiedad del DOM que te permite buscar la densidad del dispositivo actual: la propiedad window.devicePixelRatio del DOM. El valor de esta propiedad especifica el factor de ajuste de escala utilizado para el dispositivo actual. Por ejemplo, si el valor de window.devicePixelRatio es "1.0", se considera que el dispositivo tiene densidad media y no se aplican ajustes de escala de forma predeterminada; si el valor es "1.5", se considera que el dispositivo tiene densidad alta y la página se ajusta 1.5 veces de forma predeterminada; si el valor es "0.75", se considera que el dispositivo tiene densidad baja y la página se ajusta 0.75 veces de forma predeterminada. Por supuesto que el ajuste de escala que aplican el navegador de Android y WebView se basa en la densidad de destino de la página web, según se describe en la sección Cómo definir la densidad de destino del viewport. La densidad de destino predeterminada es la densidad media, pero puedes cambiarla para que se modifique el ajuste de la escala de tu página web en función de diferentes densidades de pantalla.
Por ejemplo, a continuación, se indica cómo puedes buscar la densidad del dispositivo con 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");
}