Cómo brindar compatibilidad con diferentes pantallas en apps web

Como Android está disponible en dispositivos con una variedad de tamaños y densidades de píxeles tener en cuenta estos factores en el diseño web para que las páginas tengan el tamaño adecuado. WebView admite DOM, CSS y metaetiquetas. para que proceses correctamente tu contenido web.

Al orientar sus páginas web a dispositivos con Android, existen dos factores principales que debe considerar para:

Viewport
El viewport es el área rectangular que proporciona una región para elementos de diseño a tu página web. Tú puede especificar varias propiedades del viewport, como el tamaño y la escala inicial. Lo más importante es el el ancho de la vista del puerto, que define el número total de píxeles horizontales disponibles desde la ventana punto de vista, la cantidad de píxeles 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. a valores de píxeles independientes de la densidad, de modo que su página web aparezca en el mismo tamaño perceptible que el pantalla de densidad media, alrededor de 160 dpi. Sin embargo, si los gráficos son un elemento importante de tu en el diseño web, presta atención al escalamiento que se produce en las diferentes densidades. Por ejemplo, una imagen que sea de 300 px de ancho en una pantalla de 320 dpi se escala verticalmente: utiliza más píxeles físicos por CSS píxel. Esto puede producir alteraciones como difuminado y pixelado. 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 aprender más sobre la densidad de la pantalla, lee 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 tiempo total visible coincide con el tamaño de la pantalla cuando se aleja totalmente, el viewport tiene su propio píxel las dimensiones 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ñadas con 800 píxeles de ancho serán completamente visibles en la pantalla cuando la escala del viewport sea de 1.0.

Más probable los navegadores web en Android (incluido Chrome) configuran el viewport en un tamaño grande de forma predeterminada. Este _modo de viewport ancha_ tiene aproximadamente 980 px de ancho. Muchos navegadores también alejan la imagen hasta donde posible de forma predeterminada para mostrar el ancho completo de la vista del puerto, conocido como _modo de vista general_.

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

La siguiente sintaxis muestra todas las propiedades del viewport compatibles y los tipos de valores. aceptadas por cada uno:

<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 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 ajuste exactamente a todos los dispositivos y, luego, use consultas de medios de CSS para adaptar los diseños de forma flexible para que se adapten a diferentes tamaños de pantalla.

Cómo orientar la densidad del dispositivo con CSS

WebView admite -webkit-device-pixel-ratio, que es un medio de CSS. que te permite crear estilos para densidades de pantalla específicas. El valor que le aplicas el atributo debe ser 0.75, 1 o 1.5 para indicar que los estilos son para dispositivos con pantallas de alta densidad, respectivamente.

Se pueden 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 manejar las diferentes densidades de pantalla, en especial las imágenes, consulta Las imágenes con valores altos de PPP para densidades de píxeles variables.

Densidad de dispositivos objetivo 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 escalamiento que se usa para el dispositivo actual. Si el valor de window.devicePixelRatio es 1.0, el dispositivo se considera de densidad media y no se aplica escalamiento de forma predeterminada. Si el botón es 1.5, el dispositivo se considera de alta densidad y la página se ajusta 1.5 veces de forma predeterminada. Si el valor es 0.75, entonces el dispositivo se considera de baja densidad, y la página es escala 0.75 veces de forma predeterminada.

El escalamiento que aplican el navegador Android y WebView se basa en la configuración de la página densidad objetivo. Como se describe en la sección definición del viewport densidad objetivo, el objetivo predeterminado es la densidad media, pero puedes modificarlo para que cómo se adapta tu 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");
}