By using $(window).load() you are actually waiting for the page to load, even images and other files and when everything is loaded, your code will execute. So therefor it's better to run it inside an IIFE.
(function($){
var cfg = {
mobileRedirect: 'http://bookbaysearch.appspot.com/',
// see below
},
isTouch = (function(){
// see below
}()),
deviceDetection = (function(){
// see below
}(navigator.userAgent || navigator.vendor || window.opera));
//direct mobile users
if (isTouch && deviceDetection === cfg.devices.mobile){
window.location.href = cfg.mobileRedirect;
}
// once the DOM is ready
$(function(){
// do something for other devices
//$(document.body).addClass(deviceDetection);
});
// once all is loaded
$(window).load(function(){
// do something after everything is loaded
});
}(window.jQuery));
I don't believe you actually have to wait for the DOM ready event to run the check, since the navigator object will be available once connected. Hence, it's there in my example in case you need it for something else.
Touch detection
touch: (window.Modernizr && Modernizr.touch === true) || (function () {
return !!((window.hasOwnProperty("ontouchstart")) || (window.DocumentTouch && document instanceof window.DocumentTouch));
})(),
Device detection:
You can check out detectmobilebrowsers.com as I did. Somewhere hidden on that page they have a small regexp for tablets. Anything else I consider it to be a desktop.
I've wrapped them up both in a property deviceDetection which you can use as a class on the body and then do some fancy css or separate behavior in your script.
var cfg = {
patterns: {
mobile: new RegExp('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|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'),
mobile2: new RegExp('/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(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'),
tablet: new RegExp('/android|ipad|playbook|silk/g')
},
devices: {
mobile: "mobile",
tablet: "tablet",
desktop: "desktop"
}
};
// Device detection
// todo (research): device detection -vs- touch detection
// @doc: http://modernizr.com/docs/
// @doc: http://detectmobilebrowsers.com
// @param (dvc): browser string value
// @return (string): mobile | tablet | desktop
deviceDetection: (function (dvc) {
var cfgPatterns = cfg.patterns,
cfgDevice = cfg.devices;
return cfgPatterns.mobile.test(dvc) || cfgPatterns.mobile2.test(dvc.substr(0, 4))
? cfgDevice.mobile
: cfgPatterns.tablet.test(dvc)
? cfgDevice.tablet
: cfgDevice.desktop;
}(navigator.userAgent || navigator.vendor || window.opera)),
As it is still not possible to have a 100% accurate detection, a combination of touch detection and device detection can help. Even Modernizr doesn't have the best approach imho and therefor, wherever I need it, I use a combination of both.
source: Modernizr docs
The Modernizr.touch test only indicates if the browser supports touch events, which does not necessarily reflect a touchscreen device. For example, Palm Pre / WebOS (touch) phones do not support touch events and thus fail this test. Additionally, Chrome (desktop) used to lie about its support on this, but that has since been rectified. Modernizr also tests for Multitouch Support via a media query, which is how Firefox 4 exposes that for Windows 7 tablets.
It's recommended to set both touch and mouse events together, to cater for hybrid devices – see the Touch And Mouse HTML5 Rocks article.
