Android Phone Browser Detection

Question

I have an web application where mobile phone users see a mobile optimized website. The new Samsung Galaxy SIII user agent provides no clue that the request is coming from a mobile phone. What are the best pratices to detect mobile phones?

I'm aware of javascript feature detection (ie. modernizer) but am hoping for something better. Below is the Samsung Galaxy SIII user agent:

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.34 Safari/534.24

EDIT: The SIII has two possible user agents. Above is the 'desktop' version. Fun stuff. See link below for details.

http://www.anandtech.com/Show/Index/5310?cPage=19&all=False&sort=0&page=5&slug=samsung-galaxy-nexus-ice-cream-sandwich-review

Answer 1

Looking at that user agent, I'd have to say that, that would be extremely difficult to differentiate from a non-handheld device.

The problem with browser detection is that it's obviously easy to tweak the user agent string, and thus you never really know if what the server is telling you is honest or not.

You have two options in this case:

• You can check every single header the phone sends and maybe see if there is one that could make it unique

• Or find some type of work-around by testing page load time etc..., As a whimsical example, browsers on handheld devices usually render pages a bit slower than their desktop counterparts, so after testing every possible mobile device with something like:

-

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
 // some code..
}

You can see if a page with nothing else but a simple script is not loading in it's ideal time.

You get the point.

Also, try going here and see if it can detect you: http://detectmobilebrowsers.com/

Answer 2

The "desktop mode" user agent is designed so that the web server doesn't deliver a mobile/tablet interface when the user has deliberately chosen to have the desktop mode - it is a usability anti-pattern to remove that choice from the user.

If you absolutely *must* override the user's choice, then in JavaScript currently (2013) if all the following are true then it very likely is an Android device:

1. 'ontouchstart' in document.documentElement
2. navigator.vendor === 'Google Inc.'
3. /^Linux armv/.test(navigator.platform)

However the above will give false positives and negatives with some less common browser setups e.g. an ARM based ChromeBook with touch, e.g. maybe Chromium running on Linux with an ARM processor (although perhaps that is Linux/ARM), e.g. maybe other browsers Firefox/Opera etc e.g. an Android device that is not touch based like a TV e.g. can Chrome run on Windows RT with an ARM processor? e.g. an Android running on Intel.

Answer 3

I have to detect "desktop view" after all, so similar to robocat's answer this is what I'm using to detect 'desktop view'. It's not perfect but it seems to provide the right balance of avoiding false positives:

if (userAgent.indexOf('X11; Linux x86_64') !== -1 
      && 'ontouchstart' in document.documentElement 
      && /^Linux armv/.test(navigator.platform) 
      && _constructor.isChrome) {
    		if ((window.outerWidth < 500 && window.outerHeight < 800) || (window.outerWidth < 800 && window.outerHeight < 500)) {
                // do stuff.
            }
  }

Helped me decide what the width / height filter should be

http://mydevice.io/devices/ http://viewportsizes.com/?filter=