Mobiel

Waarom je site er piepklein en uitgezoomd uit kan zien op een telefoon

De meest voorkomende reden waarom een site kapot aanvoelt op mobiel, vanaf de kant van het scherm van de bezoeker.

Wat het is

Deze check behandelt dezelfde viewport-meta-tag die technischer wordt uitgelegd in onze andere viewport-gids, maar vanuit de invalshoek van wat een mobiele bezoeker daadwerkelijk ervaart: zonder deze tag neemt de browser van een telefoon aan dat de pagina is gebouwd voor een veel breder desktopscherm en krimpt hij alles om het passend te maken, wat resulteert in piepkleine, moeilijk leesbare tekst en een lay-out die constant pinchen en scrollen vereist om normaal te lezen.

Voor de meeste sites vandaag de dag, vooral die met een al echt responsief ontwerp, is dit puur een ontbrekend-configuratieprobleem in plaats van een ontwerpprobleem — de responsieve lay-out bestaat, hij heeft alleen nooit de kans gekregen om te activeren.

Waarom het belangrijk is

Op de meeste websites vandaag de dag vormen mobiele bezoekers meer dan de helft van het totale verkeer, dus zo'n fundamenteel mobiel weergaveprobleem is geen klein randgeval — het treft heel vaak de meerderheid van iedereen die de site überhaupt bezoekt. Een bezoeker die op een pagina landt die er kapot, benauwd en moeilijk navigeerbaar uitziet op zijn telefoon, vertrekt aanzienlijk sneller meteen dan dat hij vecht met pinchen en zoomen om tekst van normale grootte te lezen.

Omdat dit specifieke probleem zo visueel voor de hand liggend is zodra het wordt gecontroleerd (open de site gewoon op een telefoon), is het ook een van de snelste dingen om bevestigd op te lossen zodra de onderliggende instelling is gecorrigeerd.

Hoe je het oplost

  1. Open je site op een echte telefoon, of gebruik de ingebouwde mobiele voorvertoning/apparaat-toolbar van je browser (meestal beschikbaar in ontwikkelaarstools).
  2. Als de pagina eruitziet als een verschrompelde desktop-lay-out in plaats van een correct geschaalde mobiele lay-out, is deze instelling zeer waarschijnlijk de oorzaak.
  3. Zie onze technische viewport-gids voor de exacte codeoplossing — één <meta name="viewport">-tag lost dit vrijwel altijd op.
  4. Als je op een websitebouwer zit, wordt dit in bijna alle gevallen automatisch door het platform ingesteld — een kapotte mobiele weergave daar wijst meestal in plaats daarvan op een aangepaste code-embed die ermee interfereert.
  5. Controleer de pagina na de oplossing opnieuw op een telefoon om te bevestigen dat tekst en lay-out nu correct zijn geschaald zonder te hoeven inzoomen.

Controleer of jouw eigen website dit probleem heeft

Launch Readiness scant je website in enkele seconden op dit en ~50 andere problemen vóór de lancering — gratis, zonder registratie.

Start een gratis controle