Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

mobile

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?

like image 431
Martín Fixman Avatar asked Dec 17 '10 17:12

Martín Fixman


People also ask

How do I turn off zoom on the web app?

Giving a meta tag attribute "user-scalable=no" will restrict the user from zooming elsewhere. Prevent zooming all together by adding this meta tag to your head tag. This tells the mobile browser to use the same width scale and will not allow the user to zoom in at all, hence also disables that annoying behavior.

How do I turn off zoom on my phone?

We can use the <meta> tag to disable zoom in and out on a mobile web page.

How do you turn off zoom on input focus on mobile devices?

Solution 1Set the window and body to a size that fills the screen-space, without exceeding it. This is why so many people have success with forcing input text-size to 16px; once you do that, its clear that you're WAY zoomed out.


1 Answers

This should be everything you need:

<meta name="viewport"        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 
like image 99
kgutteridge Avatar answered Oct 13 '22 07:10

kgutteridge