An Simple Way Of Device Detection
I'm currently working on a website and one of the jQuery plug-ins I'm using is really just for eye candy and it only works with mouse overs (or mouse hover events). The problem is mouse over events don't work on the multitude of "touch" devices out there. I needed a quick little script to determine the device in order to stop this plug-in from activating, but also needed an easy way to add other devices down the line (like Android) when needed. Here's what I came up with...
// detect touch devices to turn off any mouseover only functionswindow.is_touch_device = (/iPhone|iPod|iPad/i).test(navigator.userAgent);We are using a regular expression (ignoring case) to determine if our product name is located in the navigator user agent string. If it is, then we set our touch variable to true. This method should be compatible with all major browsers (old and new)
I'm not 100% sure if I like using the userAgent to detect the device, but I couldn't think of an easier way of doing this. If you have some thoughts let me know.
