zoukankan      html  css  js  c++  java
  • js判断当前设备

    最近用bootstrap做自适应,发现仍然很难很好的兼容web端和PC端的现实。

    仔细观察百度,淘宝,京东等大型网站,发现这些网站都有对应不同客户端的子站。

    例如:

    站点PC端urlweb端url
    百度 www.baidu.com m.baidu.com
    淘宝 www.taobao.com m.taobao.com
    京东 www.jd.com m.jd.com
    网易 www.163.com 3g.163.com

    虽然对应不同的客户端做了不同的页面,但如何得知用户当前用的什么呢?

    通过度娘找到了一套简单易理解的js代码

    /*判断当前设备跳转到指定地址。PCurl:PC端地址;WebUel:PC端地址;*/
    function judgmentClient(PCurl,WebUel){
        var UserClient = navigator.userAgent.toLowerCase();
        var IsIPad = UserClient.match(/ipad/i) == "ipad";
        var IsIphoneOs = UserClient.match(/iphone os/i) == "iphone os";
        var IsMidp = UserClient.match(/midp/i) == "midp";
        var IsUc7 = UserClient.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
        var IsUc = UserClient.match(/ucweb/i) == "ucweb";
        var IsAndroid = UserClient.match(/android/i) == "android";
        var IsCE = UserClient.match(/windows ce/i) == "windows ce";
        var IsWM = UserClient.match(/windows mobile/i) == "windows mobile";
        if(IsIPad || IsIphoneOs || IsMidp || IsUc7 || IsUc || IsAndroid || IsCE || IsWM){
            window.location = WebUel;
        }else{
            window.location = PCurl;
        }
    }

    这套代码虽然可以直接使用,但会有个调用的问题。

    假设现有一个PC页 和 一个Web页,这两个页面onload的时候都调用这个函数,结果是反复调用此函数,页面不停刷新。(有兴趣的朋友可以自行尝试)

    起初这个调用bug想了两个小时就是绕不出来。(本菜有点愚钝)

    后来终于想明白了,其实就是把这个拆开成两个函数,分开调用就OK了。

    // PC端调用判断web设备
    function PCjudgment(WebUel){
        var UserClient = navigator.userAgent.toLowerCase();
        var IsIPad = UserClient.match(/ipad/i) == "ipad";
        var IsIphoneOs = UserClient.match(/iphone os/i) == "iphone os";
        var IsMidp = UserClient.match(/midp/i) == "midp";
        var IsUc7 = UserClient.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
        var IsUc = UserClient.match(/ucweb/i) == "ucweb";
        var IsAndroid = UserClient.match(/android/i) == "android";
        var IsCE = UserClient.match(/windows ce/i) == "windows ce";
        var IsWM = UserClient.match(/windows mobile/i) == "windows mobile";
        if(IsIPad || IsIphoneOs || IsMidp || IsUc7 || IsUc || IsAndroid || IsCE || IsWM){
            window.location = WebUel;
        }
    }
    // web端调用判断PC设备
    function Webjudgment(pcUel){
        var UserClient = navigator.userAgent.toLowerCase();
        var IsIPad = UserClient.match(/ipad/i) == "ipad";
        var IsIphoneOs = UserClient.match(/iphone os/i) == "iphone os";
        var IsMidp = UserClient.match(/midp/i) == "midp";
        var IsUc7 = UserClient.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
        var IsUc = UserClient.match(/ucweb/i) == "ucweb";
        var IsAndroid = UserClient.match(/android/i) == "android";
        var IsCE = UserClient.match(/windows ce/i) == "windows ce";
        var IsWM = UserClient.match(/windows mobile/i) == "windows mobile";
        if(!IsIPad && !IsIphoneOs && !IsMidp && !IsUc7 && !IsUc && !IsAndroid && !IsCE && !IsWM){
            window.location = pcUel;
        }
    }

    pc端调用pc的函数,web端调用web的函数,这样就搞定了。

  • 相关阅读:
    【转-整理】Eclipse中Maven项目创建
    Python错误——failed to execute pyi_rth_pkgres
    linux使用——创建用户、设置密码、设置SSH远程秘钥登录
    Javascript数组——some()、every()、forEach()遍历区别
    linux使用——nohup不起作用
    IDEA操作——Intellij IDEA 无法找到引入的包和类
    mysql中批量update数据
    获取中国标准的本周日期
    tomcat下配置https环境
    mysql中创建远程用户并授权,得以在本地代码中运行远程数据库
  • 原文地址:https://www.cnblogs.com/MirageFox/p/6002252.html
Copyright © 2011-2022 走看看