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 bined 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?

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 bined 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?

• javascript
• modernizr
• browser-feature-detection

• Strictly speaking you can't tell for sure. Even the user agent string is problematic, especially since panies introduce about a million new phone models a month. (A lot of people would call an iPad a mobile device anyway :-) – Pointy Commented Sep 6, 2012 at 11:35
• I think Modernizr tries to explicitly discourage this sort of sniffing, so they probably haven't implemented a method. However I can see that in your case you have a reason, so probably your best bet is to use navigator.userAgent. – Robin Winslow Commented Sep 6, 2012 at 11:36
• Ah, I think the feature detection method might be to use this: stackoverflow./questions/5196833/… – Robin Winslow Commented Sep 6, 2012 at 11:38
• @Pointy you're right, the iPad probably is a mobile device. The reason I don't want the iPad to pass the test is because you are unlikely to call from it. The user is more likely to be sat at home and they will want to see the freephone number so they can call it on their phone. – punkrockbuddyholly Commented Sep 6, 2012 at 11:38
• Now geolocation is true in a number of desktop browsers. They have a link to a test suite where you can see if options are turned off/on. (modernizr.github.io/Modernizr/test/index.html) I checked on my Mac Mini Safari, Chrome, Firefox and Opera. All of them had geolocation set to true. – Pamela Cook - LightBe Corp Commented Feb 19, 2015 at 18:47

3 Answers 3

By using Modernizr API Method Modernizr.mq(str)

Example:

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

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

I remend 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.

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

http://detectmobilebrowsers./