Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Reliable Way to Detect Desktop vs. Mobile Browser [duplicate]

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?

like image 844
moey Avatar asked Jan 21 '13 14:01

moey


People also ask

What is the best way to detect a mobile device?

In summary, we recommend looking for the string “Mobi” anywhere in the User Agent to detect a mobile device. Like this: if (/Mobi/. test(navigator.

How do I know if a site is open on mobile or desktop?

We can use the CSS media queries to check whether the website is opened inside a web browser or a mobile browser. This information can be fetched using the min-width and the max-width of the webpage.

How can I tell if request came from mobile or computer in PHP?

The easiest way to detect mobile device in PHP is to check if the “mobile” word exists in HTTP User Agent. Use the $_SERVER variable with HTTP_USER_AGENT indices to get the User-Agent being used to access the web page. Based on the HTTP User Agent, you can detect mobile or desktop devices in PHP.

How do you detect which browser is being used JavaScript?

How to detect the user browser ( Safari, Chrome, IE, Firefox and Opera ) using JavaScript ? The browser on which the current page is opening can be checked using JavaScript. The userAgent property of the navigator object is used to return the user-agent header string sent by the browser.


1 Answers

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!

like image 91
Rémi Breton Avatar answered Oct 12 '22 13:10

Rémi Breton