Ir al contenido

Prueba en móvil

Usa el selector de viewport responsivo en el builder para una revisión rápida, luego publica y prueba en un dispositivo real para todo lo que involucre comportamiento exclusivo de móviles.

Hay dos niveles para las pruebas en móvil dentro de Proyecta: la vista previa responsiva integrada en el builder, y las pruebas en un dispositivo real con una URL publicada.

El panel de vista previa incluye un selector de viewport en la barra de direcciones:

ModoDimensiones
DesktopAncho completo de la ventana
Tablet768 × 1024
Mobile375 × 667

Cambia entre ellos mientras editas para detectar problemas de diseño a tiempo. Es la forma más rápida de identificar errores responsivos evidentes (desbordamiento, grids rotos, botones que no se pueden tocar).

El selector de viewport solo simula dimensiones — no simula entrada táctil, latencia real, peculiaridades del navegador móvil ni comportamiento específico de cada plataforma. Para todo lo que realmente importa (interacciones táctiles, prompts de instalación, notificaciones push, cámara, GPS), prueba en un dispositivo real:

  1. Publica tu app en su subdominio *.proyecta.live
  2. Abre la URL en el navegador de tu teléfono
  3. Si agregaste soporte PWA, selecciona Add to Home Screen y prueba la experiencia instalada
  4. Recorre los flujos que te interesen

Cosas que solo puedes detectar en un dispositivo real

Sección titulada «Cosas que solo puedes detectar en un dispositivo real»
  • Tamaño de los objetivos táctiles — los dedos son más grandes que los punteros del mouse
  • Elementos fijos (sticky) — las unidades de viewport se comportan de forma diferente con el chrome del navegador móvil
  • Entradas de formulario — autocompletado, tipos de teclado, autocomplete
  • Peculiaridades de iOS Safari — problemas con 100vh, scroll con rebote, posicionamiento fijo
  • Flujo de permiso para notificaciones push — solo funciona en un origen publicado sobre HTTPS en una pestaña de navegador de nivel superior; no se activará dentro del panel de vista previa del builder (incluso cuando la vista previa ya se sirve sobre HTTPS).
  • Rendimiento en hardware real (más lento)
  • Usa las herramientas de desarrollo de tu teléfono. Safari en macOS puede conectarse a Safari móvil para depuración en vivo; Chrome puede conectarse a Chrome en Android.
  • Prueba también en modo horizontal. La mayoría de los devs solo prueban en vertical y se pierden errores en landscape.
  • Prueba con el modo de bajo consumo activado. Las animaciones y los temporizadores se comportan de forma diferente.
  • Prueba en un iPhone real para push en PWA. Las notificaciones push en iOS solo funcionan desde una PWA instalada a través de Safari.