js判断PC端与移动端跳转

网络编程 2024/11/17 佚名

3 1 2

在网上看到很多这样类似的代码，但是有的很复杂，或者有的没有判断完全，上次经理去见完客户回来讲，使用苹果浏览打开pc端（pc已经做了识别跳转）会自动跳转到移动端的网页去，后来经测试才发现

document.writeln(" 是否为移动终端: "+browser.versions.mobile+"</br>"); //打印出来 true

所以在完整版的代码中第一层if 判断一直是true

以上的原因是因为，网上流传的判断为：

mobile: !! u.match(/AppleWebKit.*Mobile.*/) || !! u.match(/AppleWebKit/), //是否为移动终端

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

下面小编为大家分享网站常用的判断代码

pc自动跳移动端

(function() {
      if (/Android|webOS|iPhone|iPad|Windows Phone|iPod|BlackBerry|SymbianOS|Nokia|Mobile|Opera Mini/i.test(navigator.userAgent)) {
        var siteName = window.location.pathname;
        if (url.indexOf("") < 0) {
          try {
				if (typeof siteName !== "undefined") {
            	window.location.href = "https://m.jb51.net" + siteName
          		} 
          } catch (e) {}
        }
      }
    })();

移动端自动跳pc端

;(function() {
  var reWriteUrl = function(url) {
    if (url) {
      var Splits = url.split("/"),
      siteName = window.location.pathname;
      if (typeof siteName !== "undefined") {
        return "https://www.jb51.net" + siteName
      }
    }
  };
  if (!/Android|webOS|iPhone|iPad|Windows Phone|iPod|BlackBerry|SymbianOS|Nokia|Mobile|Opera Mini/i.test(navigator.userAgent)) {
    var url = window.location.href;
    var pathname = window.location.pathname;
    if (url.indexOf("") < 0) {
      try {
        window.location.href = reWriteUrl(url)
      } catch(e) {}
    }
  }
})();

正确的判断应该为：

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;)"语言版本: "+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;)"移动端网址";
 }
};

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

js判断pc和手机跳转,js判断手机端跳转

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“js判断PC端与移动端跳转”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月17日

js判断PC端与移动端跳转

Bootstrap下拉菜单Dropdowns的实现代码

Bootstrap面板（Panels）的简单实现代码

评论“js判断PC端与移动端跳转”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接