Mobile Device Detection & Touch Screen Desktops

Not too long ago, I thought that this type of script was a pretty solid way of making sure that you redirect your traffic to a mobile site:

if( ('querySelector' in document && 'localStorage' in window && 'addEventListener' in window && ('ontouchstart' in window || window.DocumentTouch && document instanceof DocumentTouch) ) || navigator.userAgent.indexOf('IEMobile') > 0){

location.replace('YOUR MOBILE SITE'); }

I originally got it from here: http://roughlybrilliant.com/jquery_mobile_best_practices#9

The question I've been asking myself lately is, with touch interfaces coming to desktop screens, this type of code that detects a touch interface will no longer just apply to mobile screens.

Due to this & the fact that mobile browsing growing exponentially, the best approach I believe is to just go for Responsive Design & one of the easier ways to do that is to use something like Twitter Bootstrap - http://twitter.github.io/bootstrap/scaffolding.html#responsive


Happy Coding!