Inzoomen is uitgezet: laat bezoekers weer knijpen
Met user-scalable=no of maximum-scale=1 in je viewport-tag voorkom je dat bezoekers op hun telefoon inzoomen. Ontwerpers deden dat vroeger om te voorkomen dat de layout verschoof. Inmiddels is het vooral een obstakel.
In het kud-rapport Inzoomen is uitgezet
Waarom het uitmaakt
Slechtziende bezoekers zoomen in om tekst of foto's te kunnen lezen. Blokkeer je dat, dan sluit je ze uit.
Het gaat ook in tegen de toegankelijkheidsrichtlijnen (WCAG), waar sinds de Europese toegankelijkheidswet steeds meer bedrijven aan moeten voldoen.
Zo los je het op
- Haal
user-scalable=noenuser-scalable=0weg uit je viewport-tag. - Haal
maximum-scale=1weg, of zet hem op minstens 5. - Zoomt je pagina vanzelf in als iemand in een invoerveld tikt? Dat komt door tekst kleiner dan 16 pixels in het veld. Maak de tekst in invoervelden 16 pixels, dan is dat probleem ook weg.
<!-- niet zo -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- maar zo -->
<meta name="viewport" content="width=device-width, initial-scale=1">Op jouw platform
- WordPress en Shopify
- De viewport-tag staat in je thema, meestal in header.php of theme.liquid. Pas hem daar aan, of vraag je developer.
Veelgestelde vragen
Waarom stond dit er eigenlijk in?
Vroeger zoomden telefoons vanzelf in bij invoervelden en schoof de layout soms. Dat los je nu beter op met lettergrootte 16 pixels in je velden.
Negeert mijn telefoon dit niet al?
Safari op iPhone negeert user-scalable=no grotendeels, maar andere browsers niet. Weghalen is dus nog steeds nodig.