js判断当前页面在移动设备还是在PC端中打开


Posted in Javascript onJanuary 06, 2016

本文实例讲解了js判断当前页面在移动设备还是在PC端中打开的详细代码,分享给大家供大家参考,具体内容如下

var browser = {
              versions: function () {
                var u = navigator.userAgent, app = navigator.appVersion;
                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.*/), //是否为移动终端
                  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, //是否为iPhone或者QQHD浏览器
                  iPad: u.indexOf('iPad') > -1, //是否iPad
                  webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部
                };
              }(),
              language: (navigator.browserLanguage || navigator.language).toLowerCase()
            }            
            if (browser.versions.mobile) {//判断是否是移动设备打开。browser代码在下面
                var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
                if (ua.match(/MicroMessenger/i) == "micromessenger") {
                    //在微信中打开
                   setInterval(WeixinJSBridge.call('closeWindow'),2000);
                }
                if (ua.match(/WeiBo/i) == "weibo") {
                    //在新浪微博客户端打开
                }
                if (ua.match(/QQ/i) == "qq") {
                    //在QQ空间打开
                }
                if (browser.versions.ios) {
                    //是否在IOS浏览器打开
                } 
                if(browser.versions.android){
                    //是否在安卓浏览器打开
                }
            } else {
                //否则就是PC浏览器打开
                window.close();
            }

代码二:js判断用户的浏览设备是移动设备还是PC

最近做的一个网站页面中需要根据用户的访问设备的不同来显示不同的页面样式,主要是判断移动设备还是电脑浏览器访问的。

下面给出js判断处理代码,以作参考。

<script type="text/javascript">
    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";
      document.writeln("您的浏览设备为:");
      if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
        document.writeln("phone");
      } else {
        document.writeln("pc");
      }
    }

    browserRedirect();
  </script>

我用电脑上的浏览器,android设备,iphone,ipad均做过测试,此代码可行,各设备判断均正确。

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JavaScript 浮点数运算 精度问题
Oct 06 Javascript
JavaScript生成随机数的4种自定义函数分享
Feb 28 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 Javascript
浅述节点的创建及常见功能的实现
Dec 15 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
Jan 10 Javascript
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
基于JavaScript canvas绘制贝塞尔曲线
Dec 25 Javascript
关于vue表单提交防双/多击的例子
Oct 31 Javascript
vue中英文切换实例代码
Jan 21 Javascript
Element Dialog对话框的使用示例
Jul 26 Javascript
基于vue hash模式微信分享#号的解决
Sep 07 Javascript
js判断当前页面用什么浏览器打开的方法
Jan 06 #Javascript
javascript中闭包(Closure)详解
Jan 06 #Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 #Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
Jan 05 #Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 #Javascript
javascript实现简单的全选和反选功能
Jan 05 #Javascript
Javascript原型链的原理详解
Jan 05 #Javascript
You might like
php minixml详解
2008/07/19 PHP
PHP下利用header()函数设置浏览器缓存的代码
2010/09/01 PHP
PHP 第二节 数据类型之数组
2012/04/28 PHP
php中防止恶意刷新页面的代码小结
2012/10/31 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
smarty中常用方法实例总结
2015/08/07 PHP
php和html的区别点详细总结
2019/09/24 PHP
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
Javascript 错误处理的几种方法
2009/06/13 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
javascript用户注册提示效果的简单实例
2013/08/17 Javascript
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
分享8点超级有用的Python编程建议(推荐)
2019/10/13 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
台湾乐天市场:日本No.1的网路购物网站
2017/03/22 全球购物
英国皇室御用百货:福南梅森(Fortnum & Mason)
2017/12/03 全球购物
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
《手指教学》反思
2014/02/14 职场文书
国培远程培训感言
2014/03/08 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
2014五年级班主任工作总结
2014/12/05 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书