Prácticas recomendadas para las aplicaciones web

Desarrollar páginas web y aplicaciones para dispositivos móviles presenta diferentes desafíos en comparación hasta desarrollar una página web con navegadores web para computadoras. Las siguientes prácticas pueden ayudarte a proporcionar la la aplicación web más eficaz para Android y otros dispositivos móviles.

  1. Redirecciona los dispositivos móviles a una versión exclusiva para dispositivos móviles del sitio web. Existen varias maneras de hacerlo con redireccionamientos del servidor. Un método común es "husmear" el Es la cadena usuario-agente que proporciona el navegador web. Para determinar si desea publicar una versión para celulares de su sitio, busque la opción "para dispositivos móviles" en el usuario-agente.
  2. Use HTML5. para dispositivos móviles. HTML5 es el lenguaje de marcación más común que se usa en sitios web móviles. Este estándar fomenta el desarrollo mobile first para garantizar que los sitios web funcionen en una variedad de dispositivos. A diferencia de los lenguajes web anteriores, HTML5 utiliza <DOCTYPE> y Declaraciones de charset: 
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. Usa los metadatos del viewport para cambiar el tamaño de tu página web correctamente. En tu documento <head>, proporciona metadatos que especifican cómo deseas que el viewport del navegador renderizar tu página web. Por ejemplo, los metadatos de tu viewport pueden especificar la altura y el ancho de la viewport del navegador, escala inicial de la página y densidad de la pantalla objetivo.

    En el siguiente ejemplo, se muestra cómo configurar los metadatos del viewport:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    Para obtener más información sobre cómo usar los metadatos del viewport para dispositivos con Android, consulta Cómo brindar compatibilidad con diferentes pantallas en apps web.

  4. Usa un diseño lineal vertical. Evita la necesidad de que el usuario se desplace hacia la izquierda y la derecha mientras navegar por tu página. El desplazamiento hacia arriba y hacia abajo es más fácil para el usuario y simplifica tu página.
  5. Establece la altura y el ancho del diseño en match_parent. Configurando tu La altura y el ancho del objeto WebView en match_parent se asegura de que las vistas de tu app tengan el tamaño correcto. No recomendamos establecer la altura a wrap_content porque el tamaño es incorrecto. De manera similar, configurar la no se admite el ancho de diseño a wrap_content, por lo que tu WebView usa el ancho del elemento superior. Debido a este comportamiento, también debes asegurarte de que ninguna de los objetos de diseño superiores de tu objeto WebView tienen la altura y el ancho establecidos en wrap_content
  6. Evita varias solicitudes de archivos. Porque los dispositivos móviles generalmente tienen una velocidad de conexión más lento que las computadoras de escritorio, haz que tu página se cargue lo más rápido posible. Una forma de acelerarlo Evita cargar archivos adicionales, como hojas de estilo y archivos de secuencias de comandos, en <head>. Además, ten en cuenta realizar análisis de dispositivos móviles PageSpeed Insights de Google para obtener sugerencias de optimización detalladas específicas para tu app

Recursos adicionales