Custom look for Android and iPhone browsers

I like the way Google and others have created a custom web design for the iPhone web browser. What is the best way to do this on a web site. How do we detect whether it’s a regular PC or a mobile device. Are there differences in the Android and iPhone screens?

What’s the best place to learn about designing custom websites for these devices?

Detect the useragent of the client browser and act on it.

For guidelines on designing a site for iPhone visit developer.apple.com. For Google Android, Google it.

Here is a javascript resource for webkit (Safari is webkit based and used as the browser in IPhone) detection: http://trac.webkit.org/wiki/DetectingWebKit

If you only want to do different views for Android an iPhone, you are best off to just check the user agent. But if you like to detect multiple different types of devices, you’d might want to check these articles:

WURFL
http://mobiforge.com/developing/story/introduction-wurfl

DeviceAtlas
http://mobiforge.com/developing/story/the-deviceatlas-api-php-part-i-the-basics

Simple device detection
http://mobiforge.com/developing/story/lightweight-device-detection-php

WURFL and DeviceAtlas gives more overhead to page loads, but they do the checking best if you want to support various screen sizes and device types. Would be a great plug-in idea to the resource repository.