2

What is the code to detect touch devices (smartphones and tablets) vs desktops browsers using userAgent.match and return a boolean variable (for example 'isipad')?

I need to test this against Android and Apple devices mainly. If the device browser is Android or Apple, return isipad = false. Else, return isipad = true.

So far I went about it like this (for iDevice browser detection) :

if( navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) ||navigator.userAgent.match(/iPad/i) )
{var isipad = true;}
else
{var isipad = false;}

It seems to work, however I would love to be able to add the android browser as well, in this case.

Thanks in advance. Alex

Alex
  • 21
  • 1
  • 1
  • 3

4 Answers4

8
if ("ontouchstart" in document.documentElement)
{
  alert("It's a touch screen device.");
}
else
{
 alert("Others devices");
}

most simple code i found after browsing a lot here and there

Pratswinz
  • 1,376
  • 10
  • 22
3

You really should not try to figure out what type of device it is. Instead, you should examine the capabilities of the host device and have your code adapt to the capabilities it finds regardless of what type of device it is. This is called "feature detection" and is considered a much better way to do things than detecting a particular browser or device.

For example, when Windows 8 tablets come out, there will be devices with both mouse and touch.

There are lots written on how to detect touch capabilities. See these for ideas:

http://alastairc.ac/2010/03/detecting-touch-based-browsing/

Optimize website for touch devices

https://stackoverflow.com/a/4819886/816620

Community
  • 1
  • 1
jfriend00
  • 580,699
  • 78
  • 809
  • 825
  • I know, but right now I am quite restricted in how I can go about it. I am using an e-learning authoring tool which can only accept a set ways of doing browser detection. I only need to differentiate between touch devices and desktops right now so I can pass the returned boolean value in the application. – Alex Sep 09 '12 at 19:32
  • @Alex - What about a desktop with both touch and mouse capabilities? I think you'll have to tell us more about what interface problem you're really trying to solve. Chances are that using the userAgent to enable/disable touch behavior is a bad design choice. If you really want to use useragent, then do a search on the web for useragent strings and you will find [giant lists](http://www.useragentstring.com/pages/useragentstring.php) from which you can decide what to do (there are thousands of useragent strings). – jfriend00 Sep 09 '12 at 19:35
  • Oh no no no. I'm not trying to enable/disable any behaviour. I use Articulate Storyline to develop e-learning. I am trying to differentiate between touch and desktop for compatibility reasons. The software does not always output consistent results when in html5 mode (tablets only) and I need to implement some workarounds in those cases (again mostly because of some software limitations at this time). – Alex Sep 09 '12 at 20:13
1

Although I agree with @jfriend00 that you should use "feature detection" rather than using the user agent, but it sounds like the user agent is your only option. I use this web site for mobile browser detection. They frequently update their code based on new devices, so update yours occasionaly. Here is the JS code:

(function(a,b){if(/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,'http://detectmobilebrowser.com/mobile');

Here is a fiddle of it in action.

davehale23
  • 4,322
  • 2
  • 24
  • 39
1

I've tested up against detectmobilebrowsers.com with and iPad mini and a Surface-tablet, and both of them returned ”No mobile browser detected”.

The strangest part about that was, that the User-Agent string for iPad mini actually contains the word "Mobile", which would suggest that it wouldn't be so difficult to determine as a mobile device.

Brian Frisch
  • 517
  • 2
  • 7
  • Surface tablets do, though, have "Touch" in their user agent, e.g. "Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; ARM; Trident/6.0; Touch)" https://msdn.microsoft.com/en-us/library/ie/hh920767%28v=vs.85%29.aspx#touch – Pat Mar 04 '15 at 16:37