By now you, or someone you know, has an iPad. Of course, Apple has been preparing people on how to design their web sites for optimal use with the iPad (see Preparing your Web Content for iPad). Of course, the biggest thing is the lack of Flash support on the iPad. Apple is instead pushing people to use “HTML5.” I put that in quotation marks because most of the contexts in which I’ve seen this have been confusing. What Apple appears to mean by “HTML5″ is that they want you to use
<video> instead of Flash video and their CSS animations and transitions instead of Flash effects.
Semantics aside, there’s a lot of information about how your site can be made to best work with the iPad, and I’d like to add a few nuggets to that body of knowledge.
The previously-linked post describes the iPad Safari user-agent to be in the following format:
Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10
This was the user-agent string during the beta testing phase. The format is slightly different for the final release: Although this appears to be the official user-agent string, I have received reports of a user-agent like this:
Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10
You’ll note the addition of “iPhone” in the operating system segment of the user-agent string. This brings the user-agent string for Safari on the iPad more into line with Safari on the iPhone and iPod Touch, which have the following user-agent strings, respectively:
Mozilla/5.0 (iPod; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16
Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16
This means a single user-agent string sniff for “iPhone” returns true in all three cases. The problem, of course, is that you might want to serve different experiences to the iPhone/iPod Touch than you would for the iPad. Make sure you double-check any user-agent sniffing designed to target these devices.
navigator.platform. The value of
return navigator.platform == "iPad";
Also, keep in mind that
navigator.platform doesn’t change even when the user-agent string for a browser is changed.
Screen dimensions and orientation
screen.height, though it may not work quite as you expect on the iPad. One would think that screen.width would be 768 when being held vertically and would be 1024 when held horizontally. However,
screen.width is always 768 regardless of the way you’re holding the iPad; likewise,
screen.height is always 1024. It’s worth noting that this is the same behavior as on the iPhone and iPod Touch.
Safari on the iPad does support the
window.orientation property, so if necessary, you can use that to determine if the user is in horizontal or vertical mode. As reminder of this functionality:
window.orientationis 0 when being held vertically
window.orientationis 90 when rotated 90 degrees to the left (horizontal)
window.orientationis -90 when rotated 90 degrees to the right (horizontal)
There is also the
orientationchange event that fires on the
window object when the device is rotated.
You can also use CSS media queries to determine if the iPad is being held in vertical or horizontal orientation, such as:
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
In this way, you can target styles specifically at different orientations. For more information, please see iPad Orientation CSS.
Mobile Safari is mobile Safari
**Update (8-April-2010): **Added references to iPad orientation CSS.
**Update (21-April-2010): **Updated description of user-agent strings.