I recently come across a problem with a client’s website that wouldn’t zoom properly on their iPad. 
How do we fix that?
Turns out, it’s very simple to fix.
There is a single meta tag, the viewport tag, that controls not only the simple zoom function, but gives the website owner complete control of how website visitors can manipulate the zoom on their site. The viewport property controls the zoom of your website for both the iPad and iPhone mobile devices.
I’ll dive into some of the things this meta tag is capable of doing below.
The Meta Tag In Its Simplest Form
This meta tag is to be placed in the <head></head> section of your website.
<meta name="viewport" content="width=device-width">Skip down for a more advanced meta tag
The viewport Property
The viewport property changes the window size of a webpage (what the user sees) when displayed on an iOS device, such as an iPad or iPhone. This property sets the stage for what visitors can do as far as scaling (zooming in and out on) your site.
<meta name="viewport" content="width=device-width">
The width Property
The width property deals with the width of the screen in pixels (who would have thought?). The default size is 980 pixels with a range of 200 to 10000 pixels.
<meta name="viewport" content="width=device-width">In the example above, I have the width set to device-width.
This automatically sets the window to the width of the device in pixels.
The initial-scale Property
This property sets the initial scale value of the website on the user’s device. The default setting is automatically calculated to fit to the webpage.
However, this only affects the user’s range when the page is first loaded. Thereafter, it’s determined by the minimum-scale and maximum-scale properties as discussed below.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The minimum-scale and maximum-scale Properties
The minimum-scale property determines how far your visitors can zoom out and has a default value of 0.25 with a range of 0 to 10.
The maximum-scale property determines how far your users can zoom in and has a default value of 5.0 with a range of 0 to 10.
<meta name="viewport" content="initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0">
The user-scalable Property (Disables/Enables Zooming)
The user-scalable property is the one that determines whether or not if visitors can zoom in and out on your website. If no property is specified then the default setting yes.
Input no to disable zooming for users.
Input yes to enable zooming for users.
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
The Meta Tag in All Its Glory
This tag below contains all of the values needed to enable the zoom functionality for your website on all iOS devices, plus some extras. To only enable and leave everything else as default, use the meta tag above and change user-scalable to yes.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,
maximum-scale=2.0, user-scalable=yes">
Source: Safari HTML Reference – Supported Meta Tags
Was this post useful? Please share your thoughts on social media or the comments below.
This is great, thank you so much for the guide!
I am having exact same issue with content not showing properly on an iPad… I hope your solution will resolve the problem. Thanks!