Ipad – List of known “Safari on iPad” differences over “Desktop Safari”

ipadrenderingsafarivariations

In recently testing a web application on Windows/Mac desktop browsers – and then on an iPad I noticed various differences in Safari that I wasn't expecting. even though the version # is the same.

I'd like to compose a list of those differences (for myself and others) to have as a developer reference.

e.g. in Safari on the iPad

iPad Safari takes full control of Select list/option styling
iPad opens the onscreen keyboard when an input element receives focus, thus inline floating calendar widgets (and the like) may not work as expected (or need to be altered)
iPad Safari doesn't support position:fixed like desktop Safari < iOS 5
iPad Safari (similar to iPhone/iPodTouch Safari) automatically hyperlinks 10 digit numbers to offer phone #/contact options
iPad Safari prompt('long message...','default'); shows only 1 line of the message (though it does provide scrolling of the message

I've heard from others that certain JavaScript doesn't work, etc. etc. but I have yet to fully test it thus I'd be grateful for any discoveries that you may have encountered.

Best Answer

A few more for you:

No Flash
Lousy iFrame support (so facebook like etc. needs a custom implementation for iPad)
Weird caching limitations
HTML textAreas doesn't get a scroll bar (you have to double-finger swipe - which of course, is amazingly intuitive)

In general. Treat it like a scaled up iPhone, not a scaled down Desktop.

Related Solutions

Javascript – iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari

I found a solution which works, although it is a bit ugly. It also won't work in every situation, but it works for me. Since I'm adapting the size of the user interface to the iPad's window size, the user is normally unable to scroll. In other words, if I set the window's scrollTop, it will remain at 0.

If, on the other hand, the keyboard is shown, scrolling suddenly works. So I can set scrollTop, immediately test its value, and then reset it. Here's how that might look in code, using jQuery:

$(document).ready(function(){
    $('input').bind('focus',function() {
        $(window).scrollTop(10);
        var keyboard_shown = $(window).scrollTop() > 0;
        $(window).scrollTop(0);

        $('#test').append(keyboard_shown?'keyboard ':'nokeyboard ');
    });
});

Normally, you would expect this to not be visible to the user. Unfortunately, at least when running in the Simulator, the iPad visibly (though quickly) scrolls up and down again. Still, it works, at least in some specific situations.

I've tested this on an iPad, and it seems to work fine.

Iphone – List of known differences between “Safari on iPad” and “Safari on iPhone”

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.

Related Topic