Blog

Useful code snippets for building iPhone / iTouch friendly websites

Posted on March 5, 2010 Posted in blog, web development
Useful code snippets for building iPhone / iTouch friendly websites

Apple’s iPhone and iTouch devices have had a massive effect on how users browse the web. Mobile web usage has increased many folds and web designers have now started to design specifically for mobile devices.

Because the Safari web browser on the iPhone/iTouch does a pretty good job at rendering most websites, I haven’t had the need to create a complete workaround for mobile devices. If your website is standard compliant, you don’t need to worry too much about users accessing your website through such devices.

However, what if you wanted to give your iPhone/iTouch users not just the regular desktop website to look at but an provide them with the ‘ Apple experience’  when browsing your site?

One way to do this, is to create an app of your website but this is probably not suitable for everyone. Another way is to create an iPhone/iTouch friendly version of your website without having to maintain two different websites. I like this way too!

I came across an excellent article that has collected useful code snippets that you’ll need when creating an iPhone/iTouch. The code snippets include:

- Detect iPhones and iPods using Javascript
- Detect iPhones and iPods using PHP
- Set iPhone width as the viewport
- Insert an iPhone specific icon
- Prevent Safari from adjusting text size on rotate
- Detect iPhone orientation
- Apply CSS styles to iPhones/iPods only
- Automatically re-size images for iPhones
- Hide toolbar by default
- Make use of special links
- Simulate :hover pseudo class

The article is written by Jean-Baptiste Jung10+ useful code snippets to develop iPhone friendly websites.

Post to Twitter Post to Delicious Post to Digg Post to Facebook Post to StumbleUpon

No Comments »

Leave a reply

Your Name
July 14, 2009

Name

Mail (will not be published)

Website

Message

* Name, Email, and Comment are Required