Testen op mobiel

Gebruik de responsieve viewport-switcher in de builder voor een snelle controle, publiceer daarna en test op een echt apparaat voor alles wat mobielspecifiek gedrag betreft.

Mobiel testen in Proyecta bestaat uit twee lagen: de responsieve preview in de builder, en testen op een echt apparaat via een gepubliceerde URL.

Responsieve preview in de builder

Het preview-paneel bevat een viewport-switcher in de adresbalk:

Modus	Afmetingen
Desktop	Volledige vensterbreedte
Tablet	768 × 1024
Mobile	390 × 844

Wissel er tijdens het bewerken tussen om vroegtijdig lay-outproblemen op te sporen. Dit is de snelste manier om voor de hand liggende responsieve bugs te ontdekken (overflow, kapotte grids, knoppen die niet aantikbaar zijn).

Open de app op je telefoon met een QR-code

De snelste manier om op een echt apparaat te testen is via het tabblad Mobile → Test in het dashboard. Zodra je app is gepubliceerd, verschijnt er een QR-code — scan hem met de camera van je telefoon om de live app direct te openen. Er is ook een Copy link-knop als je de URL liever naar jezelf stuurt. (Als je nog niet hebt gepubliceerd, vraagt het tabblad je dat eerst te doen — testen op een apparaat vereist een live URL.)

Testen op een echt apparaat

De viewport-switcher simuleert alleen afmetingen — hij simuleert geen touch-invoer, realistische latentie, eigenwijsheden van mobiele browsers of platformspecifiek gedrag. Voor alles wat er echt toe doet (touch-interacties, installatieprompts, pushmeldingen, camera, GPS) moet je op een echt apparaat testen:

1. Publiceer je app naar het *.proyecta.live-subdomein
2. Open de URL in de browser van je telefoon
3. Als je PWA-ondersteuning hebt toegevoegd, kies dan Add to Home Screen en test de geïnstalleerde ervaring
4. Doorloop de flows die voor jou belangrijk zijn

Dingen die je alleen op een echt apparaat kunt ontdekken

• Grootte van tikdoelen — vingers zijn groter dan muiswijzers
• Sticky elementen — viewport-eenheden gedragen zich anders met de chrome van mobiele browsers
• Formulierinvoer — automatisch invullen, toetsenbordtypen, autocomplete
• iOS Safari-eigenwijsheden — 100vh-problemen, scroll-bounce, vaste positionering
• Toestemmingsstroom voor pushmeldingen — werkt alleen op een gepubliceerde origin via HTTPS in een browsertabblad op het hoogste niveau; het wordt niet geactiveerd in het preview-paneel van de builder (ook niet als de preview al via HTTPS wordt geserveerd).
• Prestaties op echte (langzamere) hardware

Testtips

• Gebruik de ontwikkelaarstools van je telefoon. Safari op macOS kan verbinding maken met mobiele Safari voor live debugging; Chrome kan verbinding maken met Android Chrome.
• Test ook in landschapsoriëntatie. De meeste ontwikkelaars testen alleen in staande stand en missen bugs in liggende stand.
• Test met de energiebesparingsmodus ingeschakeld. Animaties en timers gedragen zich dan anders.
• Test op een echte iPhone voor PWA-push. Pushmeldingen op iOS werken alleen vanuit een PWA die via Safari is geïnstalleerd.