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

版权声明：本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/Fabulous1111/article/details/83345002

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

基本思路：

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

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

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

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

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

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

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

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