×

前端开发:如何实现“移动设备访问PC域名的时候跳转到移动网站”的应用

作者:Web前端之家2020.06.02来源:Web前端之家浏览:3208评论:0
关键词:html5js设备判断
微信公众号

微信公众号

近期一直忙于一个业务的PC和移动html5版本的改版,折腾了很久,累得够呛,今天终于完美交工。每次项目完成后,都想分享点内容,本次想谈下很小的知识点:移动设备访问PC域名的时候跳转到移动网站。

这个功能相信大家都比较熟悉了,或许也做过,但是今天介绍一系列方法,供大家参考。首先看下PC和移动的效果图:

PC

mobile

接下来介绍一种简单的方法,分析下如何实现的。

第一步

我们首先需要熟悉移动端的设备参数有哪些,废话不多说,直接列举下吧:

phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone

了解后,我们就可以对于这些参数去判断了。

第二步

通过JS的if语句去判断,上代码:

if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
      window.location.href="/mobile/";
      console.log("mobile");
      return false;
  }
  else {
      window.location.href="/";
      console.log("pc");      
      return false;
  }

第三步

一般像这种公用的组件代码,我们需要封装起来,比如利用函数goToPage(),然后再去调用,这样会好很多,方便其他同事去应用。

// 识别设备
function goToPage() {
  if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
      window.location.href="/mobile/";
      console.log("mobile");
      return false;
  }
  else {
      window.location.href="/";
      console.log("pc");      
      return false;
  }
}

以上代码,我们可以根据自己具体的项目,去指定window.location.href的路径,看上去是不是很简单呢。

但是。。。。。。。。问题来了,移动打开PC正常可以跳转到html5页面的,但是PC打开PC地址,就不停的跳转reload,这肯定不行的啊,所以我们可以用最简单的方法去处理,通过单方面的判断,也就是去掉else,代码如下:

// 识别设备
function goToPage() {
  if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
      window.location.href="/mobile/";
      console.log("mobile");
      return false;
  }
}

OK,这样就正常了。

上面介绍的只是其中一种方法,我还收集了一些其他方法,供大家学习下,直接列举吧。

其他方法

至于以下的方法,就不一一再去分析了,大家有疑问可以留言咨询,或者加QQ群讨论。

方法二

function IsPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
                "SymbianOS", "Windows Phone",
                "iPad", "iPod"];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}

方法三

function browserRedirect() {
    var sUserAgent = navigator.userAgent.toLowerCase();
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    var bIsAndroid = sUserAgent.match(/android/i) == "android";
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
    if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) ){
        window.location.href=B页面;
    }
}
browserRedirect();

方法四(百度方法)

function uaredirect(f) {
 try {
  if (document.getElementById("bdmark") != null) {
   return
  }
  var b = false;
  if (arguments[1]) {
   var e = window.location.host;
   var a = window.location.href;
   if (isSubdomain(arguments[1], e) == 1) {
    f = f + "/#m/" + a;
    b = true
   } else {
    if (isSubdomain(arguments[1], e) == 2) {
     f = f + "/#m/" + a;
     b = true
    } else {
     f = a;
     b = false
    }
   }
  } else {
   b = true
  }
  if (b) {
   var c = window.location.hash;
   if (!c.match("fromapp")) {
    if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|SymbianOS)/i))) {
     location.replace(f)
    }
   }
  }
 } catch(d) {}
}
function isSubdomain(c, d) {
 this.getdomain = function(f) {
  var e = f.indexOf("://");
  if (e > 0) {
   var h = f.substr(e + 3)
  } else {
   var h = f
  }
  var g = /^www\./;
  if (g.test(h)) {
   h = h.substr(4)
  }
  return h
 };
 if (c == d) {
  return 1
 } else {
  var c = this.getdomain(c);
  var b = this.getdomain(d);
  if (c == b) {
   return 1
  } else {
   c = c.replace(".", "\\.");
   var a = new RegExp("\\." + c + "$");
   if (b.match(a)) {
    return 2
   } else {
    return 0
   }
  }
 }
};

OK,一共四种方法,就这么多了,大家拿去用吧。

总结

Web前端开发中,一个小小的知识点,就可以引发这么多的方法,可想而知,我们需要学习的东西还有很多,加油吧,老铁们!

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/javascript20200602.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • Web前端之家

    只是更轻便,还是有些差距的呢,小项目可以玩玩。...

  • ja124

    这个跟vue和react比,好些吗?...

  • Web前端之家

    OK,已经更新,谢谢!...

  • 韩涛博客

    韩涛博客的域名更换为www.hantaosec.com啦,请更新一下域名哈,谢谢。我还会继续链着咱们...

  • Web前端之家

    请持续关注Web前端之家。...

  • Y4K

    谢谢指导,这下背景问题解决了!...

  • Web前端之家

    要用起来才可以....

  • 钢板

    只有持续的学习和应用才能把知识牢固起来www.jinanxingya.com...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.8 Valyria