Consejos para optimizar un sitio web para el navegador de Android?
Estoy buscando consejos, trucos y recursos para optimizar el diseño de un sitio web para el navegador de Android.
Estoy construyendo una aplicación de Android y algunas de las funcionalidades serán accesibles a través de una interfaz web.
- Android 2.2 2.3 solución para la consulta de medios de ancho de dispositivo
- ¿Existe un método aceptable de plataforma cruzada para mostrar un teclado numérico en formularios web estándar en un dispositivo basado en táctil?
- ¿Cuál es la forma correcta de desarrollar aplicaciones para sitios web en Córdoba?
- ¿Cómo detectar una presión de contacto largo con javascript para Android y iPhone?
- CSS gradiente no funciona en Android 2.3.6?
- El navegador de Android actualiza la página después de seleccionar el archivo a través del elemento de entrada
- Cómo abrir el archivo .html local en los emuladores de Android y Blackberry, para la prueba?
- Líneas de guía para el desarrollo de aplicaciones Web de Android
- Corregido el encabezado y el pie de página en la versión para móviles un sitio web
- JavaScript console.log () en dispositivos HTC Android y adb logcat
- Dynamic "apple-touch-icon" en dispositivos Android?
- ¿Cómo escalar un sitio web para dispositivos móviles?
- Mejores prácticas de tamaño de imagen para aplicaciones móviles
Confío en dos elementos para optimizar sitios web para navegadores móviles (especialmente Android y iPhone):
Meta etiquetas: HandheldFriendly y viewport
Normalmente quiero que las páginas no tengan un ancho de página de 800 a 900 píxeles, ya que los navegadores de Android y iPhone lo configuran de forma predeterminada. Para que el ancho de página sea el mismo que el ancho del dispositivo, establezco las siguientes etiquetas meta:
<meta name="HandheldFriendly" content="true" /> <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />
Consultas de medios CSS
Adapto el diseño al ancho de la página. Por ejemplo, tener un contenido de 2 columnas para pantallas grandes y una columna para pantallas pequeñas e imprimir. Así que incluyo en el archivo css principal principal css-includes con consultas de medios:
@import url(style-screen.css) screen; @import url(style-small.css) print, handheld; @import url(style-large.css) screen and (min-width: 801px); @import url(style-small.css) screen and (max-width: 800px);
Me pareció que fue un largo camino para agregar estas dos meta etiquetas a mi sitio:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> <meta name="HandheldFriendly" content="True" />
Aquí hay más información sobre ellos: http://learnthemobileweb.com/2009/07/mobile-meta-tags/
En cuanto a jQuery, hay una versión optimizada para los navegadores móviles: http://jquerymobile.com/
Dev.opera tiene algunos artículos, no para android, por supuesto, sino para sitios web móviles en general. Por ejemplo:
Hacer que los dispositivos pequeños se vean geniales
Diseño y desarrollo de sitios web móviles en el mundo real
Como todas las páginas web móviles mantener cada cosa delgada como mutch como puedas ..
No sé de los recursos decentes de Android, pero no me volvería demasiado loco en el JavaScript. Si Android es algo como el iPhone, el rendimiento de JavaScript (actual) será mucho peor de lo que podría estar acostumbrado a los escritorios.
- TextView horizontal center en RelativeLayout
- El artículo de DrawerLayout hace clic – ¿Cuándo es el momento adecuado para reemplazar el fragmento?