Reponsive design and the iPad viewport

I had been noticing that the iPad’s viewport in webkit browsers was odd but I couldn’t put my finger on it.

So I opened Safari on the iPad and ran some JS in firebug lite; the result: 768×504 in landscape and 768×928 in portrait mode.
Not what I expected at all.

The code I ran in firebug lite was:

alert(jQuery(window).width() + 'x ' + jQuery(window).height());

(prepend javascript: for use in the URL bar)

Bottom line: the viewport width is 768px in both portrait and landscape mode. That’s a little odd.

Initially I was reviewing the site in http://responsinator.com/. I found it intriguing that the landscape mockup for the iPad didn’t match what I was seeing.

There a couple of great gists that list a number of viewport tests. An excerpt from the first: https://gist.github.com/jonathantneal/1410787:

iPad 1 iOS5 (tablet):
Safari:
meta-none: p 980×1185 – l 981×644
meta-width: p 768×928 – l 768×504
meta-width-initial: p 768×928 – l 769×505 (onload 1024×672)
meta-width-initial-maximum: p 768×928 – l 1024×672

There you have it.
Based on this comment the Safari viewport has gotten smaller since iOS 4:

iPad 1 iOS4 (tablet):
Safari:
meta-none: p 980×1208 – l 661×980
meta-width: p 768×946 – l 768×518

That’ interesting.

A fork of that gist by doxaras added a number of tests including the iOS Opera Mini app.
Opera Mini actually has a different width based on orientation. Plus it’s quite a bit closer to the expected viewport (total viewable area – the browser nav) of 768×1024:

meta-width: p 768×956 – l 1024×700

A page reload is required to view to the change in orientation. That’s not too snazzy but at least the page is being rendered with a larger viewport from the start and now it matches the view responsinator.com.

So many breakpoints, so little time…
Well, now I feel educated.

Comments
  • Rick says:

    I think responsive design is such an important concept right now, especially with devices such as the iPad (lucidchart.com/pages/examples/ipad-mockup-tool), which has multiple viewing orientations. Great work on figuring that out.

Leave a Comment