Zoomen uitgeschakeld

Silktide controleert elke pagina op code die voorkomt dat bezoekers op mobiele apparaten kunnen inzoomen. Knijpen om te zoomen moet altijd beschikbaar zijn, omdat veel mensen hiervan afhankelijk zijn om je content te lezen.

De verantwoordelijke code staat in de -tag van de pagina:

<!-- Probleem: zowel user-scalable=no als maximum-scale=1 blokkeren zoomen -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<!-- Oplossing: gebruikers laten zoomen -->
<meta name="viewport" content="width=device-width, initial-scale=1">

Waarom dit belangrijk is

Knijpen om te zoomen is de manier waarop mensen met een beperkt gezichtsvermogen het web op een telefoon lezen. Het helpt ook alle anderen bij kleine letters, gedetailleerde kaarten en afbeeldingen. Een pagina waarop dit is uitgeschakeld, maakt dat allemaal onmogelijk: bezoekers kunnen dit niet omzeilen.

Zoomen wordt meestal om cosmetische redenen uitgeschakeld, om te voorkomen dat een lay-out verschuift. De gevolgen worden volledig gedragen door de mensen die deze functie het hardst nodig hebben, en richtlijnen voor toegankelijkheid vereisen dat tekst kan worden vergroot. Sommige apparaten negeren deze beperking inmiddels juist omdat die zoveel schade veroorzaakt, maar veel browsers houden er nog steeds rekening mee.

Zo los je het op

Verwijder user-scalable=no uit elke viewport-tag.
Verwijder maximum-scale-waarden die het zoomen beperken tot de normale grootte van de pagina of daar vlak bij (zoals maximum-scale=1).
Als je lay-out stukgaat wanneer er wordt ingezoomd, los dit dan op met in plaats van bezoekers het zoomen te ontzeggen.

Hoe Silktide dit controleert

Laad de pagina op een gesimuleerd mobiel apparaat.
Zoek elke viewport-metatag.
Rapporteer elke tag die zoomen blokkeert: user-scalable=no of een maximum-scale die niet hoger is dan de schaal waarop de pagina al wordt geladen.

Problemen oplossen

Ik kan nog steeds zoomen op mijn iPhone

iOS negeert deze viewport-beperkingen en staat knijpen om te zoomen toch toe. Andere browsers en platforms houden er nog steeds rekening mee, dus de code blijft een echte drempel en moet worden aangepast. Test het probleem op een Android-apparaat om het te reproduceren.

De tag wordt toegevoegd door mijn framework of thema

Sommige oudere thema's en app-frameworks voegen standaard user-scalable=no toe. Zoek naar een viewport- of zoominstelling in het thema, of overschrijf de tag in de template van je pagina.