How to detect touch device browsers vs desktop using javascript?

Question

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

Peyton

Answer 1

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

Revivalist

Answer 2

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://mcmap.net/q/42184/-what-39-s-the-best-way-to-detect-a-39-touch-screen-39-device-using-javascript

Sauveur

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. – Peyton

@Peyton - 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 from which you can decide what to do (there are thousands of useragent strings). – Sauveur

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). – Peyton

Answer 3

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.

Laurilaurianne

Answer 4

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.

Savate

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)" msdn.microsoft.com/en-us/library/ie/… – Steinke