Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to disable zooming capabilities in responsive design?

Tags:

How can I disable zoom-in and zoom-out capability in responsive design pages while using iPad, iPhone and/or some other smartphone.

Is there any way to control it?

like image 373
Mo. Avatar asked Nov 04 '12 03:11

Mo.


People also ask

How do I stop a website from zooming in?

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 you turn off zoom in CSS?

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

Is it possible to disable zooming on mobile devices while using bootstrap?

You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application.


1 Answers

Create a META viewport tag, and set the user-scalable property to 'no', like this:

<meta name="viewport" content="user-scalable=no" /> 

Updated answer:-

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
like image 60
Adam Stanley Avatar answered Sep 27 '22 18:09

Adam Stanley