Reliable Way to Detect Desktop vs. Mobile Browser

Question

Possible Duplicate:
What is the Best way to do Browser Detection in Javascript?

I'd like to essentially do the following (in JavaScript or PHP):

if (desktop browser) {
     do x;
}
else {   // mobile browser
     do not do x;
}

It is known that using a browser detection method is not recommended. A better solution is using a capability testing. My question is, with mobile browsers become smarter and as powerful as the desktop version, what ideally exclusive capability detection to filter the desktop from non-desktop browsers?

I think reversing the conditional check i.e. if (mobile browser) {} else ... might prove to be more problematic, right?

You seem to be missing the point of feature detection. The point is to detect the features you care about and not if it is mobile/desktop. — Quentin, Jan 21 '13 at 14:06
Thanks for pointing that out, @Quentin. Hopefully, this clarifies others who are trying to do the same. — moey, Jan 21 '13 at 14:13
@Quentin yes, yes, we know, feature detection is better, but what if someone specifically wants to know if their user is visiting from a mobile device, not to serve up a different version of the site, but to customize the user experience? — BBagi, Feb 27 '13 at 16:14
@RuralJuror — Customise how? Fit neatly into a small screen? Use media queries. Support touch? Progressively enhance with touch events. Provide location specific information? Why does that need to be mobile only? — Quentin, Feb 27 '13 at 16:30
@Quentin for performance reasons and progressive enhancement. Speed is the most important factor of any website. Responsive sites are great for designer but from a mobile performance perspective not so much. Some things media queries can't do. Like load that 3rd party widget on desktop **only** so I don't incur another X requests on a 3G connection. Or so I can disable my incompatible video advertisement service and enable text ads on the mobile instead. — Anthony Hatzopoulos, Oct 14 '14 at 14:50
@AnthonyHatzopoulos — "A slow internet connection" is not the same as mobile. My mobile connection is faster than my Dad's broadband. It also isn't the same as "unmetered", my mobile broadband is unmetered, and some landline based systems aren't. — Quentin, Oct 14 '14 at 15:15
@Quentin I am not talking about your fast connection. I am talking about [WPO](http://en.wikipedia.org/wiki/Web_performance_optimization) and FEO. I'm talking about making a fast site even faster. Faster than the competitions. I'm talking about NOT loading something on mobile because it's not needed or because it's not supported like certain advertisement widgets for example that are not responsive. More [here](https://developers.google.com/speed/pagespeed/), [here](https://plus.google.com/+IlyaGrigorik/posts/RFHxfJsEvqC) and on [youtube](https://www.youtube.com/watch?v=WrA85a4ZIaM) — Anthony Hatzopoulos, Oct 14 '14 at 17:05
All of which are things that are based around connection speed or screen size, so connection speed and screen size are the features you should be detecting, not "mobile". — Quentin, Oct 14 '14 at 21:54

Rémi Breton · Accepted Answer · 2013-01-21T14:25:14.380

What a little Google search turned up, from A Beautiful Site:

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

if(isMobile.any()){
    // Mobile!
} else {
    // Not mobile
}

I will not argue that feature detection is way preferable to user-agent sniffing, which is terrible actually. But if you're detecting feature to determine whether or not the device is considered mobile or not, you're exposing yourself to a whole new serie of problems.

You can't check pixel-ratio because new desktops computers will most likely be "retina" or super-HD. You can't check device-orientation because it's not something unique to mobiles anymore. You can't check (if you can) the gyroscope because some laptop might return values.

Build websites that works on all platforms without trying to separate them!

I was about to add a comment to check against `window.orientation` but apparently as you pointed out it's no longer exclusive for the mobile devices. Is it mainly because of Windows 8? — moey, Jan 21 '13 at 14:27
Mainly, yes. But the point is that we might (and almost certainly will) have a market flooded by orientation-aware devices very soon. Detecting *mobile* is pointless and should be considered bad practice. — Rémi Breton, Jan 21 '13 at 15:31
There are different implementations for the concept presented here by @Remi: to evaluate the `navigator.userAgent`. I like the reminder that checking against something that is used to be mobile specific e.g. device orientation might not be valid / effective anymore, pretty soon. — moey, Jan 22 '13 at 00:30

score 0 · Answer 2 · answered Jan 21 '13 at 14:14

0

I think you're looking for the get_browser() function in php.

Attempts to determine the capabilities of the user's browser, by looking up the browser's information in the browscap.ini file.

answered Jan 21 '13 at 14:14

Vlad Preda

9,780
7
36
63

Reliable Way to Detect Desktop vs. Mobile Browser

2 Answers2

Linked

Related