{"id":130,"date":"2014-05-19T22:00:47","date_gmt":"2014-05-19T16:00:47","guid":{"rendered":"http:\/\/promincproductions.com\/blog\/?p=130"},"modified":"2014-06-01T09:38:45","modified_gmt":"2014-06-01T03:38:45","slug":"javascript-detection-touch-enabled-devices","status":"publish","type":"post","link":"https:\/\/promincproductions.com\/blog\/javascript-detection-touch-enabled-devices\/","title":{"rendered":"Javascript – Detection of Touch Enabled Devices"},"content":{"rendered":"

I needed to determine if a device is touch enabled or not to modify the user experience based on that. \u00a0I know that Modernizer<\/a> is the standard for this sort of thing, and I’ve used it in the past and it does work nicely. \u00a0However I didn’t want to go that route for two reasons:<\/p>\n

    \n
  1. In designing a mobile friendly, fast loading site, I didn’t want to add another library for my users to download when I only needed one feature (that turned out to be one short line of code)<\/li>\n
  2. In my research, Modernizer has limitations with IE10. \u00a0Now in fairness, the posts I was reading were about two\u00a0years old and I’m guessing Modernizer has corrected that issue, but given my first point here I didn’t want to go that route anyway.<\/li>\n<\/ol>\n

    The Solution<\/h2>\n

    So my solution was this, found via the reference linked below.<\/p>\n

    \r\nvar isTouch =(('ontouchstart'in window)||(navigator.msMaxTouchPoints >0));\r\n<\/pre>\n
    The variable isTouch will return true if you are on a touch screen. \u00a0The<\/p>\n
    \r\n'ontouchstart'in window\r\n<\/pre>\n
    portion covers most all browsers, where as<\/p>\n
    navigator.msMaxTouchPoints > 0<\/pre>\n
    is specifically looking for IE devices, I believe it’s IE10 and above with the new Windows mobile push that this came about. \u00a0So this should cover all browsers and devices.<\/p>\n
    In Use<\/h3>\n
    With that one line of device feature detection in place, I simply add something like this and we are all set to go.<\/p>\n
    \r\nif( isTouch == false ) {\r\n  \/*  Do something that only non-touch devices can benefit from *\/\r\n}\r\n<\/pre>\n
    Browsers Tested<\/h3>\n