zoukankan      html  css  js  c++  java
  • JS判断android ios系统 PC端和移动端

    最近公司上线移动端,需要根据不同的系统跳转到不同的产品页面,百度后发现这一段代码很好用,不但可以判断当前是什么系统,还能知道当前浏览器是什么内核,移动端PC端都已测试无问题!

    var browser = {
                versions: function() {
                    var u = navigator.userAgent,app = navigator.appVersion;
                    return { //移动终端浏览器版本信息
                        trident: u.indexOf('Trident') > -1, //IE内核
                        presto: u.indexOf('Presto') > -1, //opera内核
                        webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                        gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                        mobile: !! u.match(/AppleWebKit.*Mobile.*/) || !! u.match(/AppleWebKit/), //是否为移动终端
                        ios: !! u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                        android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
                        iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
                        iPad: u.indexOf('iPad') > -1, //是否iPad
                        webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部
                    };
                }(),
                language: (navigator.browserLanguage || navigator.language).toLowerCase()
            }
            if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) {
                window.location.href = "http://www.baidu.com";//想要跳转的地址
            } else if (browser.versions.android) {
                window.location.href = "http://www.hao123.com";//想要跳转的地址
            }

    还有另一种简单写法,对于简单只需要判断是什么系统的可以试试下面的这种方法

    if (/android/i.test(navigator.userAgent)) {
                window.location.href = "http://www.hao123.com";//想要跳转的地址
            }

            if (/ipad|iphone|mac/i.test(navigator.userAgent)) {
                window.location.href = "http://www.baidu.com";//想要跳转的地址
            }

    如果还工区分当前系统是移动端和PC端则需要用下面的方法,第一种方式有一个mobile 可以区分PC端跟移动端,但是在mac上面不起作用,会判断成移动端,所以得用下面的笨方法,判断目前主流的移动手持设备来区分移动跟PC端

    <img src="jcwy.png" alt="" class="tips" id="tipsid"/>

    var nowclass=browserRedirect();  if(nowclass.bIsIpad||nowclass.bIsIphoneOs||nowclass.bIsMidp||nowclass.bIsUc7||nowclass.bIsUc||nowclass.bIsAndroid||nowclass.bIsCE||nowclass.bIsWM){
                if(nowclass.bIsIphoneOs||nowclass.bIsIpad||nowclass.bIsMidp){//如果是ios移动设备
                    window.location.href = "ios需要跳转的地方";
                    if(nowclass.bIsWX){//解决以微信内核浏览器打开无法直接跳转给出提示点击跳转至safari打开
                        document.getElementById("tipsid").style.display="block";
                    }
                }
                else if(nowclass.bIsAndroid){//如果是android移动设备
                    window.location.href = "android需要跳转的地方";
                }
            }
            else{
                window.location.href = "PC端跳转去的地方";
            }
           function browserRedirect() {
                var sUserAgent = navigator.userAgent.toLowerCase();
                var systemclass={};
                systemclass.bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
                systemclass.bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
                systemclass.bIsMidp = sUserAgent.match(/midp/i) == "midp";
                systemclass.bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
                systemclass.bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
                systemclass.bIsAndroid = sUserAgent.match(/android/i) == "android";
                systemclass.bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
                systemclass.bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
                systemclass.bIsWX=sUserAgent.match(/MicroMessenger/i)=="micromessenger";
                return systemclass;
            }

  • 相关阅读:
    PV、UV、VV,CV的含义
    JS动态修改页面EasyUI datebox不生效、EasyUI动态添加Class、EasyUI动态渲染解析解决方案
    JavaScript Object.defineProperty()方法详解
    jquery on()方法绑定多个选择器,多个事件
    jQuery自定义事件
    jquery插件开发快速入门
    JavaScript日期处理
    js原生函数bind
    使用jquery.pjax实现SPA单页面应用
    PushState+Ajax实现简单的单页面应用SPA
  • 原文地址:https://www.cnblogs.com/xwwin/p/4179885.html
Copyright © 2011-2022 走看看