Cómo brindar compatibilidad con diferentes pantallas en apps web

Como Android está disponible en dispositivos con diferentes tamaños de pantalla y densidades de píxeles, ten en cuenta estos factores en el diseño web para que tus páginas tengan el tamaño adecuado. WebView admite funciones de DOM, CSS y metaetiquetas para ayudarte a procesar el contenido web de manera correcta.

Cuando segmentas tus páginas web para dispositivos con tecnología 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 WebView y la mayoría de los navegadores web en Android convierten los valores de píxeles de CSS en valores de píxeles independientes de la densidad, por lo que tu página web aparece en el mismo tamaño perceptible que una pantalla de densidad media: aproximadamente 160 dpi. Sin embargo, si los gráficos son un elemento importante de tu diseño web, presta atención al escalamiento que se produce en diferentes densidades. Por ejemplo, una imagen de 300 px de ancho en una pantalla de 320 dpi se escala verticalmente, ya que utiliza más píxeles físicos por píxel de CSS. Esto puede producir desperfectos, como imágenes poco nítidas o pixeladas. Para simplificar, Android contrae la mayoría de las densidades de pantalla más pequeñas en algunas categorías generales: pequeña, mediana y grande. Para obtener más información sobre la densidad de la pantalla, consulta Cómo brindar compatibilidad con diferentes densidades de píxeles.

Consulta los siguientes recursos relacionados:

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 al máximo, 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 puede tener 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 con 800 píxeles de ancho sea completamente visible en la pantalla cuando la escala de 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. Este _modo de viewport amplio_ tiene aproximadamente 980 px de ancho. Muchos navegadores también alejan el texto lo más posible de forma predeterminada para mostrar el ancho completo del viewport, lo que se conoce como _modo de descripción general_.

Puedes definir las propiedades del viewport de tu página web, como el ancho y el nivel de zoom inicial, con la etiqueta <meta name="viewport" ...> en tu documento <head>.

En la siguiente sintaxis, 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 coincide con el ancho de la pantalla del dispositivo y que la capacidad de hacer zoom está inhabilitada:

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

Cuando optimizas tu sitio para dispositivos móviles, sueles 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 CSS para adaptar los diseños de manera flexible y que se adapten a diferentes tamaños de pantalla.

Densidad del dispositivo de destino con CSS

WebView admite -webkit-device-pixel-ratio, que es una función de medios de CSS que te permite crear estilos para densidades de pantalla específicas. El valor que apliques a esta función debe ser 0.75, 1 o 1.5 para indicar que los estilos son para dispositivos con pantallas de densidad baja, media o alta, respectivamente.

Puedes crear hojas de estilo independientes 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 especifica los diferentes estilos en una hoja 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 obtener más información sobre cómo controlar las diferentes densidades de pantalla, en especial las imágenes, consulta el artículo Imágenes con valores altos de DPI para densidades de píxeles variables.

Orienta la densidad del dispositivo con JavaScript

WebView admite window.devicePixelRatio, que es una propiedad del DOM que te permite consultar la densidad del dispositivo actual. El valor de esta propiedad especifica el factor de escalamiento usado para el dispositivo actual. Si el valor de window.devicePixelRatio es 1.0, se considera que el dispositivo es de densidad media y no se aplica ningún ajuste de forma predeterminada. Si el valor es 1.5, se considera que el dispositivo es de alta densidad y la página se ajusta a 1.5 veces de forma predeterminada. Si el valor es 0.75, se considera que el dispositivo es de baja densidad y la página se ajusta a 0.75 veces de forma predeterminada.

El escalamiento que aplican el navegador de Android y WebView se basa en la densidad objetivo de la página web. Como se describe en la sección definición de la densidad objetivo del viewport, el destino predeterminado es la densidad media, pero puedes cambiarlo para modificar la forma en que se ajusta la página web para 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");
}