La plataforma VIA muestra una excelente base de responsividad con 89% de las páginas optimizadas para móvil. Se identificaron 12 issues que requieren atención, principalmente en tablas complejas y componentes de mapas interactivos.
La tabla de registro de choferes (12 columnas) se desborda horizontalmente en viewports <768px. Los usuarios no pueden ver ni interactuar con las últimas columnas.
Envolver la tabla en un contenedor con scroll horizontal y añadir indicador visual
El mapa Leaflet tiene altura fija (600px) que causa problemas en móviles. Los controles de zoom quedan fuera de alcance del pulgar y el mapa ocupa todo el viewport.
Usar altura relativa y reposicionar controles para uso con pulgar
El formulario de formación de convoy (4 pasos) tiene botones pequeños y campos muy juntos. El teclado móvil cubre los campos inferiores y no hay scroll automático.
Aumentar área de toque de botones (min 44px) y añadir auto-scroll
Los gráficos de Chart.js (revenue, cost, performance) no redimensionan correctamente en móviles <375px. Las etiquetas se superponen y los tooltips quedan fuera del viewport.
La paleta de comandos global ocupa 80% del ancho en desktop pero no se ajusta en móvil. El teclado virtual cubre los resultados de búsqueda.
Páginas con sidebar (terminal-stacking.html, hazmat-planner.html, etc.) no tienen menú hamburger en móvil. El sidebar se oculta completamente dejando navegación inaccesible.
Estas páginas demuestran excelente responsividad móvil y pueden servir como referencia para mejoras:
✓ Mobile-first design - Grid adapta de 1 a 3 columnas
✓ Touch optimizado - Botones 44px+, QR scanner
✓ Responsive map - Leaflet con altura adaptativa
✓ Keyboard handling - Auto-scroll, focus management
✓ Tabs responsive - Horizontal scroll en móvil
✓ Form optimization - Campos apilados verticalmente
✓ Image upload - Touch-friendly dropzone
✓ Sticky sidebar - Se convierte en top nav en móvil
✓ Code blocks - Scroll horizontal con indicador
✓ Copy buttons - Área de toque amplia
VIA utiliza un sistema de breakpoints estándar basado en dispositivos comunes:
| Breakpoint | Dispositivo | Viewport | Media Query |
|---|---|---|---|
| Mobile S | iPhone SE, Galaxy Fold | 320px - 374px | @media (max-width: 374px) |
| Mobile M | iPhone 12/13/14, Pixel | 375px - 424px | @media (max-width: 424px) |
| Mobile L | iPhone Plus, Pixel XL | 425px - 767px | @media (max-width: 767px) |
| Tablet | iPad, Galaxy Tab | 768px - 1023px | @media (max-width: 1023px) |
| Desktop | Laptop, Monitor | 1024px+ | @media (min-width: 1024px) |