Las siguientes recomendaciones de especificaciones son experiencias resumidas por Alloyteam en el desarrollo diario. Estas especificaciones tienen buenas prácticas de proyecto y se recomiendan encarecidamente.

Configuración de fuentes

Usar fuentes sans-serif

body {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}

iOS 4.0+ usa la fuente inglesa Helvetica Neue; las versiones anteriores de iOS usan Helvetica como alternativa. La fuente china se establece como HuaWen HeiTi (STHeiTi). Cabe señalar que HuaWen HeiTi no existe en la biblioteca de fuentes de iOS (http://support.apple.com/kb/HT5484?viewlocale=en_US), pero el sistema hará que HuaWen HeiTi (STHeiTi) coincida automáticamente con la fuente china predeterminada del sistema, Heiti SC o Heiti TC.

Heiti SC Light 黑体-简 细体
Heiti SC Medium 黑体-简 中黑
Heiti TC Light 黑体-繁 细体
Heiti TC Medium 黑体-繁 中黑

En Android nativo, tanto las fuentes chinas como las inglesas usan la fuente sans-serif predeterminada.

4.0 之前版本英文字体原生 Android 使用的是 Droid Sans，中文字体原生 Android 会命中 Droid Sans Fallback
4.0 之后中英文字体都会使用原生 Android 新的 Roboto 字体
其他第三方 Android 系统也一致选择默认的无衬线字体

Interacción básica

Configurar estilos CSS globales para evitar el menú emergente de pulsación larga y la selección de texto que se muestran en la imagen.

a, img {
    -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */
}
html, body {
    -webkit-user-select: none;   /* 禁止选中文本（如无文本选中需求，此为必选项） */
    user-select: none;
}

user-select

Rendimiento móvil

Se debe considerar el rendimiento en dispositivos Android de gama baja y en escenarios de red 2G.

Elementos de verificación necesarios antes del lanzamiento

  • Todas las imágenes deben estar comprimidas.
  • Considerar una compresión con pérdida moderada, por ejemplo, convertir a imágenes JPG con calidad del 80%.
  • Considerar dividir una imagen grande en varias imágenes pequeñas; esto es común cuando el banner es demasiado grande.

Optimizar el rendimiento de carga para que la apertura sea lo suficientemente rápida.

  • Datos sin conexión: considerar almacenar en caché los datos en localStorage.
  • Número de recursos solicitados inicialmente< 4 ¡Atención!
  • Usar CSS Sprites o DATAURI para las imágenes.
  • Evitar usar @import en CSS externos.
  • Considerar incrustar contenido de recursos estáticos pequeños.
  • Volumen total de los recursos solicitados inicialmente después de gzip.< 50kb
  • ¿Están optimizados y comprimidos los recursos estáticos (HTML/CSS/JS/IMÁGENES)?
  • Evitar empaquetar bibliotecas grandes.
  • Asegurarse de que la capa de acceso tenga habilitada la compresión Gzip.
  • Usar CSS3 en lugar de imágenes siempre que sea posible.
  • Los recursos de imagen fuera de la primera pantalla inicial deben cargarse de forma diferida (lazy load).¡Atención!
  • En aplicaciones de una sola página (SPA), considerar la carga diferida de los módulos de negocio que no están en la primera pantalla.

Optimizar el rendimiento en tiempo de ejecución para que las operaciones sean lo suficientemente fluidas.

  • Evitar el problema de retraso de clic de 300+ ms en iOS.¡Atención!
  • Almacenar en caché la selección y los cálculos del DOM.
  • Evitar operaciones que provoquen el repintado de la página.
  • Aplicar debounce a eventos disparados continuamente (scroll/resize) para evitar ejecuciones de alta frecuencia.
  • Usar delegación de eventos siempre que sea posible para evitar enlazar eventos en masa.
  • Usar animaciones CSS3 en lugar de animaciones JS.
  • Evitar usar muchos efectos de degradados y sombras CSS3 en dispositivos de gama baja; se puede considerar degradar el efecto para mejorar la fluidez.
  • Mantener la estructura HTML con niveles suficientemente simples; se recomienda no superar los 5 niveles.
  • Usar la menor cantidad posible de selectores avanzados de CSS y selectores universales.
  • Keep it simple

Guía de uso de la herramienta de evaluación y detección de rendimiento en línea.

  • AccederGoogle PageSpeedSitio web de evaluación en línea
  • Ingrese la URL de destino en la barra de direcciones y haga clic en el botón Analizar para iniciar la detección.
  • Optimice según las sugerencias del análisis de PageSpeed, priorizando la resolución de los problemas de la categoría roja.

Fuente: http://www.zjgsq.com/1339.html