IPhone Meta Tag for Page Width and Zoom

Some developers are adding a specific meta tag to the header section of their website code of iPhone-specific websites or to make their traditional websites more iPhone friendly. The meta tag tells the site to display at a certain width and zoom level by default when it is displayed on a iPhone. Debate about this meta tag is circulating in the development community because different developers recommend different widths. If you are developing Web content specifically for an iPhone, include this meta tag and try it at different widths.

<meta name="viewport" content="width=480" />

Innate problems arise when setting that specific width, the most obvious being that when you turn the phone back from landscape to portrait, it must display at a different pixel width. If you want the screen to automatically be set by the width of the phone, you can add the following meta tag:

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

You can also use the meta tag to change the scale that the website displays in, to show at less than full screen but still more zoomed than the iPhone default . By changing the initial-scale part of the meta tag from 1.0 to 0.5, you are telling the site to display at half the size of the phone screen, so you ensure that if users are scrolling right to left, they will have to scroll only a maximum of double the size of the original screen. This is particularly good if you have a site that has two columns of even width. If you have a three-column site and the columns are evenly sized, you can set the initial-scale to 0.33,so that they when they open the site,they see only the first column.

<meta name="viewport" content="width=device-width; initial-scale=1.0; ^maximum-scale=1.0;">

Continue reading here: OnDeck Versus Off Deck Web Advertising

Was this article helpful?