Mobile device type detection for styling?

Question

Could anyone please advise on the best method to detect whether a site is being viewed on a mobile rather than a PC? I would like to use a couple of mobile style sheets to suit each platform, but understand that iPhones/Android try to render the site as a PC rather than mobile?

I guess a JavaScript detection script may be an option?

Answer 1

How about using CSS @media ?

h2 {
  font-size: 12em;
}
@media (max-width: 320px) {
  h2 {
    font-size: 8em;
  }
}

Answer 2

As others have pointed out, the use of @media may work for newer mobile devices and may be sufficient for your needs. I found this article to be very helpful for iPhone mobile website development.

If you need to do quality mobile detection on the server then you will need to get the server-side developers involved. I use the Wurfl database in order to power our mobile detection on the server, which then directs the inclusion or exclusion of various stylesheets, scripts, and even some page workflows.