How to disable zooming capabilities in responsive design?

html css responsive-design meta-tags
Mo. picture Mo. · Nov 4, 2012 · Viewed 34.6k times · Source

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?

Answer

Adam Stanley picture Adam Stanley · Nov 5, 2012

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">

Related questions

Maintain the aspect ratio of a div with CSS

I want to create a div that can change its width/height as the window's width changes. Are there any CSS3 rules that would allow the height to change according to the width, while maintaining its aspect ratio? I know …

Read More
Hiding elements in responsive layout?

Looking through bootstrap it looks like they support collapsing the menubar items for smaller screens. Is there something similar for other items on the page? For example, I have a along with nav-pills floated right. On a small screen this …

Read More
Height equal to dynamic width (CSS fluid layout)

Is it possible to set same height as width (ratio 1:1)? Example +----------+ | body | | 1:3 | | | | +------+ | | | div | | | | 1:1 | | | +------+ | | | | | | | | | | | +----------+ CSS div { width: 80%; height: same-as-width }

Read More