What is the most reliable way to detect a mobile d

Question

I am developing a responsive site and I have been asked to swap any freephone numbers on our site to the landline equivalent when a user is browsing on a mobile device. What is the most reliable way to detect if a user is on a mobile device using the Modernizr library (or any other library)?

I am aware of Modernizr.touch and also Modernizr.geolocation. When the two are combined in an if(Modernizr.touch && Modernizr.geolocation) statement they are a good indicator of whether you are on a mobile device however an iPad will make both these attributes true. I am reluctant to test the device size because mobile devices are getting bigger and bigger!

Has anyone tackled this before?

Answer 1

By using Modernizr API Method Modernizr.mq(str)

Example:

Modernizr.mq('only all and (max-width: 400px)')

Answer 2

Was looking for a similar thing and just tried this which seemed to work fine at first glance.

http://detectmobilebrowsers.com/

Answer 3

I know I'm a little late to the party, but as you said you are using ASP, browscap.ini based checks are available for ASP specifically.

Answer 4

I use this PHP library on my website: http://code.google.com/p/php-mobile-detect/

I recommend this over a JavaScript library as it means that there is less processing to do on the mobile device and your web page code is much cleaner without conditional statements targeting more than one device.

The caveat (if you want to call it that) is that you have two versions of your website to maintain. I don't see this as a problem myself though when weighed up against maintaining webpages with conditional statements for deciding which content to display. I have a desktop folder and a mobile folder in my root directory.

I simply use the isMobile method and ignore most of the rest but it can be used to filter down and target specific device types if you want.

E.g. usage:

 // Include the mobile detection file.
 require('Mobile_Detect.php');

 // Create new mobile detect object.
 $detect = new Mobile_Detect();
 // Create new browser object
 $browser = new Browser();
 // Check if the client is using a mobile device.
 $mobile = $detect->isMobile();

 ...

 if($mobile) {
     //Load mobile site version
     require('Mobile\\index.html');
 } else {
     //Load desktop site version
     require('Desktop\\index.html');
 }

In your case, JavaScript may be the better solution if it is only numbers you want to change though. This answer may be more ideally suited to those looking to develop an entire site that is mobile-friendly.