检测网站用户是否来自手机 [英] Detecting if a user to a website is from a mobile phone

问题描述

我已经创建了一个网站，并希望使用Javascript根据用户是否来自非移动电话导航到某个页面.我希望先执行此检查，然后再在页面上加载其他任何内容.因此，这是我的代码:

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
   }
});

因此，我正在使用$(window).load()函数，因为我假设这是jQuery调用的第一个事件，但由于某种原因，我似乎无法正常工作.我不确定我在做什么是否是实现我先前在帖子中提到的内容所需要的.任何帮助将不胜感激！

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!

推荐答案

通过使用$(window).load()，您实际上正在等待页面加载，甚至图像和其他文件，并且在加载所有内容后，您的代码将执行.因此，最好在 IIFE 中运行它.

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));

我认为您实际上不必等待DOM ready事件来运行检查，因为一旦连接后navigator对象将可用.因此，在我的示例中就可以使用它，以防您需要其他东西.

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: (window.Modernizr && Modernizr.touch === true) || (function () {
    return !!((window.hasOwnProperty("ontouchstart")) || (window.DocumentTouch && document instanceof window.DocumentTouch));
})(),

设备检测:

您可以像我一样查看 detectmobilebrowsers.com .在该页面上隐藏的某个地方，它们有一个用于平板电脑的小正则表达式.我认为它是台式机. 我将它们都包装在属性deviceDetection中，您可以将其用作主体上的类，然后在脚本中执行一些漂亮的CSS或单独的操作.

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)),

由于仍不可能实现100％准确的检测，因此将触摸检测和设备检测相结合可以提供帮助.就连Modernizr也不是最好的方法，因此，在我需要的地方，我都将两者结合使用.

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.

来源:Modernizr文档

source: Modernizr docs

Modernizr.touch测试仅指示浏览器是否支持触摸事件，不一定表示触摸屏设备.例如，Palm Pre/WebOS(触摸)电话不支持触摸事件，因此无法通过此测试.此外，Chrome(台式机)过去常常对此提供支持，但此后已得到纠正. Modernizr还通过媒体查询测试Multitouch Support，这是Firefox 4公开Windows 7平板电脑的方式. 建议同时设置触摸和鼠标事件，以适应混合设备-请参见触摸和鼠标 HTML5 Rocks文章.

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.

这篇关于检测网站用户是否来自手机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！