How can I "disable" zoom on a mobile web page?

Question

I am creating a mobile web page that is basically a big form with several text inputs.However (at least on my Android cellphone), every time I click on some input the whole page zooms there, obscuring the rest of the page. Is there some HTML or CSS command to disable this kind of zoom on moble web pages?

Answer 1

In general: You Don't. This can raise a red flag with 508 compliance issues. There are many reasons to keep it enabled. For instance, someone wanted to zoom in on a very small image, but now can't because of the disabled zoom setting. Another example is when a user wants to zoom in on some extra-small text, but can't read it, as the option to zoom has been disabled. It is undesirable for a vision-impaired user to deal with these usability setbacks. However,a viable way of allowing the content to fit the device, without losing parts of the page and without disabling zoom is to include a meta tag containing the content attribute and setting the value of the content attribute to "width=device-width, initial-scale="1.0". A developer should use the following attribues:maximum-scale="1.0", user-scalable=no with caution, as there is a specific section of the W3C which advises against this. Specifically, I am referring to The W3C/Web Content Accessibility Guidelines (WCAG) version 2 Level AA 1.4.4. The only time one, and others would benefit from disabling zoom may be the use case instance of the museum kiosk, as mentioned in this article (see Dave Owen's reply on 23 June 2017 at 8:24 pm. Here: https://adrianroselli.com/2015/10/dont-disable-zoom.html )

As of 2019, the bullet-proof syntax seems to be:

<meta name="viewport" content="width=device-width, initial-scale="1.0">