检测网站用户是否来自手机

Question

I've created a website and using Javascript I would like to navigate to a certain page based on whether the user is from a mobile phone of not. I would want this check to be performed first before anything else is loaded on the page. As such here is my code:

$(window).load(function(){
   if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|Nokia/i.test(navigator.userAgent))
   {
     window.location.href ="http://bookbaysearch.appspot.com/";
   }
   else
   {
      //Carry on Loading the page
   }
});

As such I'm using the $(window).load() function as I assume that this is the first event called by jQuery but for some reason I doesn't seem to work. I'm not sure if what I am doing is what is need to achieve what I mentioned earlier in the post. Any help would really be appreciated!

Answer 1

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.

Answer 2

Try this..

var android = (navigator.platform.indexOf("android")>=0);
if (android) {
   // Do something
}

And platform name may be..

android|webos|iphone|ipad|ipod|blackberry|iemobile

Answer 3

Try this:

$(document).on('load ready',function(){
   if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|Nokia/i.test(navigator.userAgent))
   {
     window.location.href ="http://bookbaysearch.appspot.com/";
   }
   else
   {
      //Carry on Loading the page
   }
});