Choosing a viewport for iPad sites
The iPad has made choosing a good viewport tag for your site more challenging. You now need to specify something that looks good with your content for screens that are 320px, 480px, 768px, and 1024px wide.
Viewports
Mobile Safari presents desktop-sized sites on small screens by rendering to a virtual browser screen that is 980px1 wide, and letting you pan and zoom that page. Viewport tags let you tell Mobile Safari that your site displays properly narrower than 980px, and set other preferences for scaling your page.
Craig Hockenberry famously determined the ideal viewport tag for content sites in the iPhone era. That technique is no longer sufficient for the iPad because it can blow up your content larger than 1:1, blurring your images.
TN2262
The Apple tech note “Preparing Your Web Content for iPad” has a good suggestion: avoid hard-coding a width for your viewport. On the iPad, a viewport width smaller than 1024 can cause your content to be blown up and blurred. Their suggestion is
<meta name="viewport" content="width=device-width" />
This is an improvement, but your content will still be blown up if your device is in landscape mode. This is because device-width is the width of the physical device (320px or 768px), not the width of the screen in the current orientation. As a consequence, you can get content rendered at 768px and blown up to 1024px.
Avoiding Blowup
To make sure your content is not blown up, set the maximum-scale to 1.0:
<meta name="viewport" content="width=device-width,
maximum-scale=1.0" />
Sites with the above tag will get a 1:1 viewport for all devices and orientations. This is impractical if your site does not render properly at 320px wide. In this case, hardcode a width and also set a maximum scale so your site isn’t blown up on the iPad:
<meta name="viewport" content="width=720,
maximum-scale=1.0" />
This viewport will give you 1:1 rendering on the iPad, and a 720px viewport on the iPhone and iPod touch. Any desktop site that looks good narrower than 980px should set a viewport like this, especially any site that fits in 768px, since you can opt portrait-oriented iPad users into 1:1 unblurred versions of your content.
The initial-scale Hack
In Craig’s aforelinked viewport post from 2007, he suggested adding an initial-scale and minimum-scale of around 0.5 to your viewport for long pages. Back then, this simply limited how zoomed out the page would be on initial load. That’s unnecessary now, since Mobile Safari instead sets the initial zoom to whatever is required to fit the width of the screen.
Setting a small initial-scale nowadays has an interesting effect: if your chosen initial-scale is less than would be required to fit the width of the screen, your viewport is expanded. For example, if you set a viewport of 640px wide, and an initial-scale of 0.5, it will display normally on the iPhone (scaled 0.5x to fit 640px into 320px.) On the iPad, however, it will expand your viewport to 1280px, which was probably not your intention.
Overall, the initial-scale hack doesn’t seem to have utility anymore, and has odd side effects, so I imagine sites that have adopted the initial-scale hack, such as Daring Fireball, will drop it as iPad usage increases.
- Of course, when the iPad is in landscape orientation of 1024px wide, it will use 1024px. [↩]
Apr 9 2010
4:36 pm
Anybody have examples of sites using the maximum-scale trick to prevent blurry images in the wild, other than antipode.ca and iwork.com?
May 7 2010
9:25 am
Good info….thanks for the help!
Pingback upcoming changes to the viewport meta tag for firefox mobile ✩ Mozilla Hacks – the Web developer blog
May 27 2010
9:45 am
[...] Mobile Safari, and is especially useful on large-screen devices like the iPad. (Allen Pike’s Choosing a viewport for iPad sites has a good explanation for web [...]
May 29 2010
3:54 am
VERY useful info, thanks a bunch!
Jul 7 2010
11:41 am
I am having problems because my site is 1008px wide using a custom version of the 960gs grid system.
Any ideas on how to accommodate.
Jul 7 2010
12:17 pm
Sorry, I solved it by just defining the viewport with a little extra, in this case 1016px.
Sep 5 2010
1:36 am
Thanks for this info. I wondered why my site looked microscopic on my iPad.
Dec 15 2010
8:18 pm
Great article, yet however does not cover issues. My meta tag is with the following attribute “width”. With iPad positioned vertically, my site’s div containers do not extend the full width of 100% yet are perfect when the iPad is displayed horizontally.
Viewable at: http://bransinanderson.com/
Jan 5 2011
8:03 am
great! this is exactly what i’m looking for. my site is finally looking good on ipad
Jan 6 2011
5:39 pm
A comment to my previous comment about my div container not extending the full width. My footer was set as 100% in width. The 2 columns above this were approximately 960px in width, but anything below with percentage values wouldn’t extend full width. To fix this for iPad I set the footer container by using CSS property min-width of 960px. All better now.
Pingback Hello iPad » Life of a Programmer Geek
Mar 22 2011
9:34 am
[...] Choosing a viewport for iPad sites [...]
Sep 29 2011
7:41 am
I want to keep the cabability of zooming in and out on the ipad. Is there a way of keeping this feature as well as changing from portrait to landscape and not allowing the page to blow out. Works great in xoom and galaxy but not on the ipad. Please help.
Have tried:
Not able to zoom.
without – maximum-scale=1.0,
zoom works but blows out in turning screen from portrait to landscape
Sep 29 2011
7:58 am
Hi Lisa: I don’t know of a way to allow the user to zoom in but preventing rotation from zooming in. One thing you can try (Daring Fireball does this) is to provide a custom viewport tag to the iPad based on server-side user-agent detection. That would give you more control than the “one viewport for all” approach described here.
Sep 29 2011
8:50 am
Hi Allen i think i didnt explain it properly. When i rotate it from portrait to landscape it goes beyond the screen. I would like it to fill the landscape screen but not go beyond. I will look into what you suggest. But maybe you can tell me what I’m doing wrong below. It works good in the other tablets. Thanks.
Example:
globalindustrial.com
fsdfs
Sep 29 2011
8:59 am
Sorry Allen I pasted the wrong thing – u can view the source from here –
http://spinmeaweb.net/1.html
It’s a few lines just was unable to paste the html code in here
Sep 29 2011
9:12 am
Hi Lisa: I don’t see the behaviour you describe on my iPad – maybe it’s different on iOS 5?
Sep 29 2011
9:27 am
Thanks Allen, The IPad im using is iOS4.. Actually noticed the same issues when i visited daringfireball.com on this ipad. I did however looked into it a little more and I added this below – and it seemed to fixed the problem – this is forcing it to fill the screen and im still able to zoom in.
using minimum-scale=1.0
Thanks again Allen
Oct 2 2011
3:11 am
My problem with the iPad (and my iPhone 4 does the exact same thing so I’m guessing its actually a mobile Safari thing) is simply lack of consistancy with what it does…
Some websites over 980 wide will scale down to fit and others don’t..
e.g. the image across the top of http://www.puttilingerie.com is 1120 pixels wide but scales down to fit perfectly automatically in landscape mode
http://www.clubofaces.co.uk/ipad however has an image of exactly the same width but doesn’t (and cannot be) scaled down to fit
Oct 14 2011
2:50 pm
Hi Allen,
My site, http://www.fistinthesky.com, just won’t configure properly after following your steps. My current width is set to 100.8em.
Do you have any ideas on to make it view properly on the iPhone and iPad?
Thanks
Abs
Nov 23 2011
6:24 am
Good article!thanks!
One thing i’m not sure: if the html content size is explicitly assigned in the html text and it ‘s larger then the size in the meta item, the meta content does not work for me!!
Any suggestion?
Thanks in advance.
Dec 9 2011
12:03 am
Great article. After reading this very book I was redirected here through a few links. I recommend this read for everyone that wants to forever avoid any problems with websites scaling on any device! This book is the holy grail for webdesigners and developers; enjoy.
http://www.abookapart.com/products/responsive-web-design
Dec 9 2011
7:45 am
I can’t get to work at all. I have copied the format directly from apple, android, and webkit documentation as well as following all of the examples that can be found by google.
I have no idea why it does not work. You can change any attribute to anything and it does nothing. For me, this is true in Safari(user agent=ipad), on an actual iPad, and on a droid tablet.
I would really like to get the viewport working because I believe doing so will fix an android cropping issue and an iPad jqm page transition issue. Basically not being able to use the viewport is making the site look bad.
Does anyone have any idea what the problem could be? Here is basic sample code in which the viewport tag is not working for me: http://stackoverflow.com/questions/8347314/android-3-1-browser-does-not-respect-viewport-at-all
Jan 9 2012
8:36 pm
Thank you so much! This is exactly what I needed to learn tonight. Cheers.
Jan 21 2012
4:03 pm
Thank you!!! Fixed the alignment issues I was having. You’re a lifesaver!
Jan 27 2012
8:30 am
Hi,
I’ve noticed some strange behaviour on the iPad and iPhone for short pages that use the meta viewport tag. The width is set much too large in portrait mode. Long pages appear to work properly, I’ve put together a simple test for this at http://test.devondev.com.
I don’t want to prevent the user from zooming in, so I’m not setting the maximum-scale value.
I’m using iOS 4.3.5 on the iPhone and iOS 5.0.1 on the iPad.
Thanks/peter
Feb 7 2012
3:35 am
I’ve had to move that example to http://test.devondev.com/short.html
I hope someone has some idea what’s going on here.
Thanks/peter
Feb 13 2012
2:37 pm
Anyone looking for more info on this should check out this 456 Berea Street article about viewport settings and text size control via CSS. It goes into detail about the danger of maximum-scale and explains things nicely:
http://www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
Pingback Få en hjemmeside til å vises riktig i iPhone og på iPad ? ⇐ ⇐
Mar 14 2012
2:25 am
[...] Allen Pike Posted in Diverse, lage hjemmeside | Tagged ipad hjemmeside, iphone hjemmeside, lage [...]
Pingback Choosing a viewport for iPad sites | OFT Media
Jul 4 2012
6:53 am
[...] presents desktop-sized sites on small screens by rendering to a virtual browser screen that is 980px1 wide, and letting you pan and zoom that page. Viewport tags let you tell Mobile Safari that your [...]
Jul 17 2012
8:24 am
I haven’t solved the problem per-say, but adding 700px of padding to the bottom of all my body tags made each page extend beneath “the fold” and the zoom thing stopped, all pages now have extra white space at the bottom but who cares, the rotation problem goes away