Why remove the Default Zoom for Responsive Design? When you get into building a responsive mobile design, the auto-zoom can wreak havoc with your layout elements. To avoid problems, append the following meta tag into the document header to remove the default zoom in most Android and iPhone devices.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” />
The viewport meta tag was introduced by Apple and adopted by others to change the logical window size used when displaying a page.
Viewport properties
| Property | Description |
|---|---|
width |
The width of the viewport in pixels. The default is 980. The range is from 200 to 10,000.You can also set this property to the constants described in Special viewport property values |
height |
The height of the viewport in pixels. The default is calculated based on the value of the width property and the aspect ratio of the device. The range is from 223 to 10,000 pixels.You can also set this property to the constants described in Special viewport property values |
initial-scale |
The initial scale of the viewport as a multiplier. The default is calculated to fit the webpage in the visible area. The range is determined by the minimum-scale and maximum-scale properties.You can set only the initial scale of the viewport—the scale of the viewport the first time the webpage is displayed. Thereafter, the user can zoom in and out unless you set user-scalable to no. Zooming by the user is also limited by the minimum-scaleand maximum-scale properties. |
minimum-scale |
Specifies the minimum scale value of the viewport. The default is 0.25. The range is from >0 to 10.0. |
maximum-scale |
Specifies the maximum scale value of the viewport. The default is 5.0. The range is from >0 to 10.0. |
user-scalable |
Determines whether or not the user can zoom in and out—whether or not the user can change the scale of the viewport. Set to yes to allow scaling and no to disallow scaling. The default is yes. Setting user-scalable to no also prevents a webpage from scrolling when entering text in an input field. |
Special viewport property values
| Value | Description |
|---|---|
device-width |
The width of the device in pixels. |
device-height |
The height of the device pixels. |
The initial-scale value is important as this defaults your website to a full 100% zoom.
The user-scalable value removes zoom functionality altogether so the user cannot resize the layout. This will lock the design into one size based on the full device width. Note that even if you disable the zoom functionality a good responsive design will still adapt when transitioning from portrait to landscape on any device.