Web Developers: How to develop for iPhone / iPad / iPod Mobile Safari

Thursday, June 10th, 2010 | Business | by

In short, don’t.  It’s an uphill fight.

There are a few obstacles in developing for the iPhone / iPad I thought I’d post while it was on my mind:

  • How can I test my “mobile” site?
  • How can I see errors on my iPhone?
  • Why is the iPad and iPhone different?

Basically Apple has decided to make life difficult for web developers.  This was ideally done to improve the user experience on their mobile platforms, but I don’t think it was fully thought out.

Apple places limits on the capabilities of the Mobile Safari environment per device.  These limits aren’t implemented properly (why limit downloads when you are on a WiFi connection?) — and can leave web developers scratching their heads.

How can I test my “mobile” site?

If you have an iPhone, you’re in luck.  Having the device is the only way to accurately test it (or if you have a simulator in Xcode).  You can try to use Safari, but it won’t be accurate.  You can use your iPad, but it will be different from iPhone.  You can test for your iPhone, but the iPod Touch has a different user agent.  All these platforms have their own unique peculiarities.

You can “test” in your machine’s Safari browser, but it will only simulate the User Agent:

  1. Preferences
  2. Advanced
  3. Check off “Show Develop menu in menu bar”
  4. Develop
  5. User Agent
  6. Mobile Safari options are listed

Tada! You now see the code as it is sent to your iPhone.

How can I see errors on my iPhone?

To test your mobile site you can enable debugging on your iDevice:

  1. Settings
  2. Safari
  3. Developer (scroll to the bottom)
  4. Turn “Debug Console” to “ON”

This will let you “console.log(‘hello world’)” your way to success.  You can see CSS / HTML / Javascript errors.  Some messages are concatenated to fit the iPhone platform size.

Why is the iPad, iPhone, iPod and the rest of the web browsing world different?

Good question!  Apple has decided that each platform should have it’s own (non user controllable) “tweaks” to the HTML standards.

Some known issues (let me know more!):

  1. iPhone doesn’t like CSS opacity much, iPad seems to do better
  2. iPhone displays videos only in full screen, iPad will display inline videos
  3. iPhone has an image size limit (even when you’re on WIFI!!!) — the maximum is around 6.5MB.  I’ve had mixed success testing this (you can get around this by using canvas elements)
  4. iPhone / iPod do not support autoplay or autobuffering without a user “click” action (you can fake this if you try hard)
  5. jQuery does not officially support iPad / iPhone / iPod platforms (I think it’s because of the opacity issue?)

Let me know if you’ve experienced any issues developing for these mobile platforms.  All the more reason to go Opera Mini or Android.

Related Posts

Tags: , , , , , , , , , , , ,

6 Comments to Web Developers: How to develop for iPhone / iPad / iPod Mobile Safari

June 15, 2010

This one informative post, I’m so glad to have read about the differences of iPad, iPhone, iPod when it come to their web browsing. Be back for more great information.

Alana Burrows
June 15, 2010

If only I had a dime for each time I came here.. Superb post.

March 2, 2011

I’m having a very funny issue with an image only (so far) on iOS. The banner on http://corocotta.es is an with a background that is a sprite randomly selected with some PHP. This seems to work perfectly on desktop browsers (at least what I’ve tried so far), but on mobile safari (iOS) the background image is half size… which has me stumped. Being an iOS specific problem, I’m also at a loss for which tools to use to figure out exactly what is going on…

March 2, 2011

I figured it out. For some reason, mobile safari was showing the background at 50% size, so including { -webkit-background-size: Xpx Ypx; } with the native dimensions of the background image solved the problem. I’d like to know why mobile safari decided to resize my background image though…

May 23, 2011

Jon, thanks very much for the tip on ‘-webkit-background-size: Xpx Ypx;’. Took a lot of searching but that did the trick for me. Cheers

May 25, 2011

Just started getting into web apps, and this is some great info. thanks!!

Leave a comment


Please share, it makes me happy:

Subscribe to Email Alerts

Follow Me

Follow seangw on twitter



prestashop theme

virtuemart template