Het grootste probleem is dat als de gebruiker buiten het zoomvak klikt, de zoom wordt vergrendeld en niet in of uit kan zoomen.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
De viewport is het zichtbare gedeelte van een webpagina voor de gebruiker. Het verschilt per apparaat en is kleiner op een mobiele telefoon dan op een computerscherm.
Het gedeelte width=device-width stelt de breedte van de viewport in om de breedte van het apparaat te volgen (wat zal variëren afhankelijk van het apparaat).
Het onderdeel initial-scale=1.0 stelt het initiële zoomniveau in wanneer de pagina voor het eerst door de browser wordt geladen.
Het gedeelte maximum-scale=1.0 stelt in hoeveel de gebruiker mag inzoomen op de pagina. Een waarde van 1.0 betekent dat zoomen niet is toegestaan.
De user-scalable=no part schakelt zoomen uit dat mogelijk standaard beschikbaar is op sommige apparaten (zoals dubbeltikken om in te zoomen).
Zoom uitschakelen op een mobiele webpagina
Gebruik de volgende code om zoom op een mobiele webpagina in HTML uit te schakelen:
Hierdoor wordt de pagina aangepast aan de breedte van het apparaat waarop deze wordt bekeken.
Zoom uit
Gebruik de eigenschap zoom om in HTML uit te zoomen. Bijvoorbeeld:
zoomlens: 1;
Schakel HTML-schaling uit
HTML-schaling is een functie van HTML waarmee webbrowsers de grootte van tekst en afbeeldingen kunnen vergroten of verkleinen om ze leesbaarder te maken op kleinere of grotere schermen. Deze functie kan in de meeste browsers worden uitgeschakeld door de eigenschap html-scaling in te stellen op "none".
