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:
- Check off “Show Develop menu in menu bar”
- User Agent
- 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:
- Developer (scroll to the bottom)
- Turn “Debug Console” to “ON”
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!):
- iPhone doesn’t like CSS opacity much, iPad seems to do better
- iPhone displays videos only in full screen, iPad will display inline videos
- 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)
- iPhone / iPod do not support autoplay or autobuffering without a user “click” action (you can fake this if you try hard)
- 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.