zoukankan      html  css  js  c++  java
  • js判断PC端与移动端跳转

    在网上看到很多这样类似的代码,但是有的很复杂,或者有的没有判断完全,上次经理去见完客户回来讲,使用苹果浏览打开pc端(pc已经做了识别跳转)会自动跳转到移动端的网页去,后来经测试才发现
    document.writeln(" 是否为移动终端: "+browser.versions.mobile+"</br>");  //打印出来 true

    所以在完整版的代码中 第一层if 判断一直是true
    以上的原因是因为,网上流传的判断为:  
    mobile: !! u.match(/AppleWebKit.*Mobile.*/) || !! u.match(/AppleWebKit/), //是否为移动终端

    判断不完整才会造成这种原因。

    正确的判断应该为:

    mobile: !! u.match(/AppleWebKit.*Mobile.*/) || !! u.match(/AppleWebKit/) && u.indexOf('QIHU') && u.indexOf('QIHU') > -1 && u.indexOf('Chrome') < 0,  //是否为移动终端

    测试程序代码

    var browser = {
        versions: function() {
            var u = navigator.userAgent;
            return {
                trident: u.indexOf('Trident') > -1,
                presto: u.indexOf('Presto') > -1,
                webKit: u.indexOf('AppleWebKit') > -1,
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
                mobile: !! u.match(/AppleWebKit.*Mobile.*/) || !! u.match(/AppleWebKit/) && u.indexOf('QIHU') && u.indexOf('QIHU') > -1 && u.indexOf('Chrome') < 0,
                ios: !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/),
                android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
                iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1,
                iPad: u.indexOf('iPad') > -1,
                webApp: u.indexOf('Safari') == -1
            }
        } (),
        language:(navigator.browserLanguage || navigator.language).toLowerCase()
    };
    
    
    document.writeln("语言版本: "+browser.language+"</br>");
    document.writeln(" 是否为移动终端: "+browser.versions.mobile+"</br>");
    document.writeln(" ios终端: "+browser.versions.ios+"</br>");
    document.writeln(" android终端: "+browser.versions.android+"</br>");
    document.writeln(" 是否为iPhone: "+browser.versions.iPhone+"</br>");
    document.writeln(" 是否iPad: "+browser.versions.iPad+"</br>");
    document.writeln(navigator.userAgent+"</br>");

    完整版,运用于项目代码

    /*
    *
    * 判断PC端与WAP端
    */
    var mobile_bs = {
        versions: function() {
            var u = navigator.userAgent;
            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/) && u.indexOf('QIHU') && u.indexOf('QIHU') > -1 && u.indexOf('Chrome') < 0,  //是否为移动终端
                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应该程序,没有头部与底部
            }
        } ()
    };
    
    if (mobile_bs.versions.mobile) {
        if (mobile_bs.versions.android || mobile_bs.versions.iPhone || mobile_bs.versions.iPad || mobile_bs.versions.ios) {
            window.location.href = "移动端网址";
        }
    };
  • 相关阅读:
    spring 心跳更新
    eclipse 控制台输出太多,显示不完整
    String
    iOS 开发之如何生成SDK(2)-----生成framework
    如何防止自己的APP被Hook
    JavaAPI类
    Java面向对象三大特性—封装
    Java类与对象
    Java基础易错点1
    Java数组反转及二维数组
  • 原文地址:https://www.cnblogs.com/andyhxl/p/6554402.html
Copyright © 2011-2022 走看看