Mobile-friendly: how to detect a mobile device?

Hi guys,

I'm working on making my websites responsive.

The first step to that is being able to detect when a visitor to your website is a mobile device (vs a desktop computer).

What is the best way to achieve that? I've come through this website Detect Mobile Browsers - Open source mobile phone detection
which offers a number of codes in different languages that seem to perform this task, but I'd like to know if there is any other "standard" way of detecting mobile devices.

On another hand, I'm using Cloudflare for my websites. I tried to find out if CF offers a way of telling your website whether the visitor is a mobile device. I know there is an option in CF to redirect mobile traffic to the m.website.com version of your website, but that's not what I'm looking to do.

Any help will be appreciated.

You can use Google ANalytics. It keeps records on mobile visits separately and which is very useful

veboo said:

You can use Google ANalytics. It keeps records on mobile visits separately and which is very useful

Click to expand...

I'm not talking about that.
I need to detect when a visitor is a mobile device in order to serve the proper content.

You don't need to detect what mobile device a visitor is using for responsive web design, you simply need to know the available screen size in which case you'd use css media queries e.g. http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

There's a decent tutorial at http://brianshim.com/webtricks/make-any-wordpress-theme-responsive-mobile-friendly/ which whilst intended for wordpress themes the principals remain the same.

I don't think there's another reliable way to detect a mobile device.

Detection of mobile browsers is and will always be crappy. When there are new devices/ browsers on the market you have to change your detection-script, you don't want that.
Best option in my opinion is to make your main site mobile friendly. Take a look at http://getbootstrap.com
Small learning curve, easy to use. Your site looks great on large desktops, normal desktop, and all available mobile devices and tablets.

Thanks guys, your references clarified what I need to do!

You either make your site responsive or redirect your mobile users to your mobile website, either by detecting the users user agent or by redirecting them by screen size.