List of known differences between "Safari on iPad" and "Safari on iPhone"

Question

My website looks perfect on the iPhone but looks sub-optimal on the iPad. I'm having a lot of trouble finding information on the differences between iPad's webkit/safari rendering engine and iPhones' webkit/safari rendering engine.

If you don't believe me, go to http://www.finishline.com on both the iPhone and the iPad (note that you will have to click "standard site" at the bottom of the page if you get thrown over to our Mobile site). The main differences being a missing white background and the main tabbed navigation menu at the top (also the little mini-cart up at the top right is way off).

iPhone (looks correct):

iPad (looks wrong):

What are the rendering differences between mobile webkit on iPhone and iPad?

Answer 1

iPhone and iPad use the same rendering engine, WebKit.

The only obvious differences between those platforms might be:

• If font sizes on the site are specified in pixels, the retina display's higher DPI count might have some effect on text scaling, but I might be wrong. Always specify the font sizes in points.
• Screen sizes of both devices are different. Not in terms of pixels, but in terms of physical size. This is something WebKit (or iOS in general) tries to compensate for by resizing fonts to make them readable while still fit on the page. This might lead to re-flowing the document; causing line-breaks.

For this case I can't really suggest anything else than checking your page layout. Validating it using W3C's tools and testing it properly in both Simulator and more importantly, on the devices.

From what it looks above, some CSS hacks (to make it work on IE for instance) might have an effect like this. Or a stray line break.

Generally, you shouldn't worry about differences between these two platforms, or platforms in general. Use clean CSS and HTML and test it on all target devices until it looks properly. Try to avoid using CSS/HTML hacks to make IE6 work. This is one of the root causes of problems from my experience.

As far as I know, there are no "major" differences between these devices, except for their screen size (and possibly the used WebKit/iOS version -- let's say iOS 3.x vs. iOS 4.2).

If you have access to Xcode, try to look at the site from different versions of iOS to see if that's the problem.

In either case. Fix your HTML and CSS. The problem might have a very simple cause.

Answer 2

Your iPad is probably running iOS 3.2 (or a beta of 4.2) while your iPhone is running at least iOS 4.0. That's more important than the differences between the platforms (of which there aren't supposed to be any).

I think you're barking up the wrong tree asking for a list of differences - you can go to http://trac.webkit.org/ and get an exhaustive list of patches and bug fixes between the two versions, but it's going to be quicker to just use normal CSS troubleshooting techniques (i.e. mostly trial and error) to figure out what about your site is causing it to mess up in iOS 3.2.