当前位置:首页 > 网站建设 > 源码技巧 > 正文内容

js判断PC端与移动端跳转

热淘网2个月前 (06-07)源码技巧43

在网上看到很多这样类似的代码,但是有的很复杂,或者有的没有判断完全,上次经理去见完客户回来讲,使用苹果浏览打开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("?pc") < 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("?m") < 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;)? 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 = "移动端网址";
 }
};

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

<p>扫描二维码推送至手机访问。</p><p>版权声明:本文由<strong>网站标题</strong>发布,如需转载请注明出处。</p>

本文链接:https://blog.retao5.com/yuanma/1491.html

标签: 移动端跳转
分享给朋友:
返回列表

上一篇:aliplayer视频点播加密播放

没有最新的文章了...

相关文章

基于索引的SQL语句优化

基于索引的SQL语句优化

1    前言2    总纲3    降龙十八掌第一掌 避免对列的操作第二掌 避免不必要的类型转换第三掌 增加...

uni-app打包请求权限配置大全

uni-app打包请求权限配置大全

1.android.permission.WRITE_USER_DICTIONARY允许应用程序向用户词典中写入新词2.android.permission.WRITE_SYNC_SETTINGS写入...

网页图片延时加载的js代码

网页图片延时加载的js代码

大家如果使用firebug去查看的话就会发现,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较...

一行代码解决模板兼容IE8 问题

一行代码解决模板兼容IE8 问题

前两天装了windows 7系统发现 用IE8上自己的站 边的乱七八糟在网上转了一下发现了一个简单的解决方案方法如下:只需要在页面中加入如下HTTP meta-tag: 只要IE8一读到这个标签,它就...

首页js轮播,图片可后台控制。

首页js轮播,图片可后台控制。

统默认就4种flash轮播,样式比较单一。经常我们用一些js轮播替换,这样有利于seo。一般我们都采用ftp上传图片覆盖,操作比较麻烦。小想自己写了个js调用系统flash_data.xml,读取后台...

PHP采集类snoopy详细介绍(snoopy使用教程)

PHP采集类snoopy详细介绍(snoopy使用教程)

Snoopy是一个php类,用来模拟浏览器的功能,可以获取网页内容,发送表单,可以用来开发一些采集程序和小偷程序,本文章详细介绍snoopy的使用教程。Snoopy的一些特点:抓取网页的内容 fetc...

评论列表

亚马逊商品拍摄服务商

给力!不错的文章

亚马逊商品拍摄服务商

给力!不错的文章

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。