Alex Rivera | Logout

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

Asked 2010-12-17T17:00:24.790
464

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?

Edit
Report

1 Answer

44

You can use:

<head>
  <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
  ...
</head>

But please note that with Android 4.4 the property target-densitydpi is no longer supported. So for Android 4.4 and later the following is suggested as best practice:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
answered 2012-08-22T12:10:26.347

Your Answer