Detecting mobile browsers on the web?

Question

I\'m curious to know how to check for iPhone, iPad and other mobile browsers.(JavaScript or CSS)

Edit:

Not user agent string, please. That can be faked.

Answer 1

Use Modernizr - http://modernizr.com/

Modernizr is a JS script that tests the browser for a variety of HTML5 and CSS3 capabilities when the page loads. You can either look in the Modernizr JS object, or use the classes it adds to the HTML element. If the class 'touch' is present, you have a touchscreen device; otherwise, the class is no-touch. Then you can do this in your CSS

.touch .myElement { /* touch device styles */ }

.no-touch .myElement { /* regular browser styles */ }

Testing a browsers capabilities is far more useful and future-proof that sniffing for user agents. In this way, for each CSS3 feature you want to add, you can easily write a fallback, as I show here.