El desarrollo de páginas web y aplicaciones web para dispositivos móviles representa un grupo diferente de desafíos en comparación con el desarrollo de una página web para el navegador web de escritorio típico. 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
Con el objetivo de ayudarte a dar los primeros pasos, a continuación, te brindamos una lista de prácticas que debes seguir para ofrecer la aplicación web más efectiva para Android y otros dispositivos móviles.
- Redirecciona los dispositivos a una versión exclusiva para dispositivos móviles de tu sitio web
Existen varias maneras de redireccionar las solicitudes a la versión para dispositivos móviles de tu sitio web mediante redireccionamientos del servidor. Con frecuencia, esto se logra "examinando" la string del usuario-agente que proporciona el navegador web. A fin de determinar si deseas entregar una versión para dispositivos móviles de tu sitio, debes buscar la string "mobile" en el usuario-agente.
- Usa DOCTYPE de HTML5 para dispositivos móviles
El lenguaje de marcación más común que se usa para los sitios web móviles es HTML5. Este estándar fomenta el desarrollo pensado para la tecnología móvil con el fin de garantizar que los sitios web funcionen bien en una variedad de dispositivos. A diferencia de los lenguajes web anteriores, HTML5 requiere declaraciones
<DOCTYPE>
ycharset
más simples:<!DOCTYPE html> ... <meta charset="UTF-8">
- Utiliza los metadatos del viewport para cambiar correctamente el tamaño de tu página web
En el
<head>
de tu documento, debes proporcionar metadatos que especifiquen cómo quieres que el viewport del navegador renderice la página web. Por ejemplo, los metadatos de tu viewport pueden especificar la altura y el ancho del viewport del navegador, el ajuste inicial de la página web y también la densidad de la pantalla de destino.Por ejemplo:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Si quieres obtener más información sobre cómo usar los metadatos del viewport para dispositivos con Android, consulta Cómo orientar pantallas desde aplicaciones web.
- Usa un diseño lineal vertical
Evita la necesidad de que el usuario se desplace hacia la izquierda y la derecha mientras navega por la página web. El desplazamiento hacia arriba y abajo es más fácil para el usuario y simplifica tu página web.
- Establece la altura y el ancho del diseño en
match_parent
Si estableces la altura y el ancho del objeto
WebView
enmatch_parent
, garantizas que las vistas de tu app tengan el tamaño correcto. No recomendamos establecer la altura enwrap_content
porque genera un tamaño incorrecto y, en apps orientadas a Android 4.4 (API nivel 19) o versiones anteriores, se ignoran las metaetiquetas HTML de la vista del puerto para preservar la retrocompatibilidad. Del mismo modo, establecer el ancho del diseño enwrap_content
no es compatible y hace que tuWebView
use el ancho de su elemento superior. Debido a este comportamiento, también es importante asegurarse de que ninguno de los objetos de diseño superiores de tu objetoWebView
tengan la altura y el ancho establecidos enwrap_content
. - Evita múltiples solicitudes de archivos
Debido a que los dispositivos móviles generalmente tienen una velocidad de conexión mucho más lenta que una computadora de escritorio, debes hacer que tus páginas web se carguen lo más rápido posible. Una manera de lograrlo es evitar la carga de archivos adicionales, como hojas de estilo y archivos de secuencias de comandos en el
<head>
. Un método mejor para optimizar la carga de páginas en dispositivos móviles es realizar un análisis móvil con PageSpeed Insights de Google. Si deseas optimizar el rendimiento de tu app, consulta el artículo Reglas de PageSpeed Insights.
Nota: Los dispositivos con pantalla grande de Android en los que se deben publicar sitios web en tamaño original (como las tablets) no incluyen la string "mobile" en el usuario-agente, pero el resto de la string es casi igual. Por lo tanto, es importante que publiques la versión para dispositivos móviles de tu sitio web en función de si la string "mobile" existe en el usuario-agente.
A fin de acceder a una guía más completa sobre cómo crear aplicaciones web excelentes para dispositivos móviles, consulta las prácticas recomendadas sobre la Web móvil de W3C. Si quieres obtener más información sobre cómo mejorar la velocidad de tu sitio web (para dispositivos móviles y computadoras de escritorio), consulta los instructivos de Google sobre velocidad en el artículo Cómo lograr una Web más rápida.