JavaScript判断设备类型加载对应网页并设置两端通用事件

如何判断设备类型加载对应网页并设置通用事件

基本思路：

在网页入口添加判断逻辑，如下：首先获取当前navigator对象的userAgent，通过userAgent判断当前设备类型。

①：如果符合移动端判断逻辑，则加载移动端入口；否则加载pc端入口

②：通用事件的设置，比如点击事件，PC端为click，但是移动端也用click的话分不清是长按还是点击；根据平台类型设置通用事件，可以在写触发函数时不用每次都判断。

举个例子：如下图，点击语言选择按钮弹出语言选择框，用click事件的话，PC端没有什么问题，但是移动端的话长按时不应该弹出，应该手指离开时再显示。这时我们可以给window定义一个事件，比如clickEvent，在当前页面下载时设置这个clickEvent对应的正确的事件。在写触发函数时就不必判断当前设备类型。

设置clickEvent后实现上边需求的源码：

        $(\'.select-language\').on(clickEvent, () => {
            $(\'.language-pop\').fadeIn()
        })

判断设备类型加载对应网页并设置通用事件源码：

      (function(){
          var userAgent = window.navigator.userAgent;
          var ua = userAgent.toLowerCase();
          var platform = {
                isAndroid: function() {
                    return ua.indexOf(\"android\") > -1;
                },
                isIOS: function() {
                    return ua.indexOf(\"iphone\") > -1;
                },
                isWinPhone: function() {
                    return !!navigator.userAgent.match(/Windows Phone/i);
                },
                isIpad : function(){
                    return ua.indexOf(\"ipad\") > -1;
                },
                isPhone: function() {
                    return this.isAndroid() || this.isIOS() || this.isWinPhone() || this.isIpad();
                }
          }
          if(!platform.isPhone()){
              window.location.href = window.location.href.replace(\"mobile.html\",\"pc.html\");
          }
          window.isPhone = platform.isPhone();
          window.clickEvent = isPhone ? \'touchend\':\'click\';
          window.moveEvent = isPhone ? \'touchmove\':\'mousemove\';
          window.clickStart = isPhone? \'touchstart\' : \'mousedown\';
          window.clickEnd = isPhone? \'touchend\' : \'mouseup\';
      })();