6

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

SemanticZen
  • 1,061
  • 13
  • 21

3 Answers3

3

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/

Community
  • 1
  • 1
pat34515
  • 1,901
  • 12
  • 13
  • Patrick, thanks for the quick response. It's too bad that android phones don't clearly identify themselves like how Apple devices do so. The detectmobilebrowsers.com looks like exactly what I'm looking for let me give it a try – SemanticZen Jul 22 '12 at 06:43
  • @SemanticZen, heres a [**jsFiddle**](http://jsfiddle.net/sPBrL/5/) with `detectmobilebrowsers` ready to go. It's the jQuery July 2012 plugin version. That fiddle revision is 5, but note the previous fiddles use a different version. Cheers! – arttronics Jul 22 '12 at 06:46
  • arttronics, thanks for the fiddle. When I go to the fiddle on a Samsung Galaxy SIII the fiddle displays it as mobile. However, when I put the userAgent into test as a string it doesn't work. http://jsfiddle.net/bjCJu/ This is a problem because I need to test it for devices that aren't sitting on my desk. – SemanticZen Jul 22 '12 at 08:02
  • The Solution to my problem with the fiddle was that sometimes the Samsung SIII looks like a mobile phone and sometimes it doesn't. Sometimes you feel like a nut, sometimes you don't... – SemanticZen Jul 22 '12 at 09:13
  • Hum, try this [**jsFiddle**](http://jsfiddle.net/bjCJu/1/) that has **Firebug Mini** along with a **console.log** message you can view. You might need to use the Firebug Mini Clear button, to be sure access the **Console Tab**. Then click the **Object** seen in the console that is dynamically populated for your specific device. That said, you'll see everything that the plugin knows about your Samsung. – arttronics Jul 22 '12 at 09:20
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.

robocat
  • 4,857
  • 40
  • 62
0

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=

SemanticZen
  • 1,061
  • 13
  • 21