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 相关文章推荐
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
浏览器页面区域大小的js获取方法
Sep 21 Javascript
jquery对单选框,多选框,文本框等常见操作小结
Jan 08 Javascript
jQuery判断当前点击的是第几个li的代码
Sep 26 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
Jul 27 Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 Javascript
JavaScript如何实现跨域请求
Aug 05 Javascript
js Canvas实现圆形时钟教程
Sep 19 Javascript
浅谈jquery上下滑动的注意事项
Oct 13 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
微信小程序图片自适应实现解析
Jan 21 Javascript
Vue实现todo应用的示例
Feb 20 Vue.js
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
网络资源
2006/10/09 PHP
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
微信小程序开发探究
2016/12/27 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
python实现在windows服务中新建进程的方法
2015/06/30 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
python实现汉诺塔算法
2021/03/01 Python
使用Template格式化Python字符串的方法
2019/01/22 Python
python实现网站微信登录的示例代码
2019/09/18 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
小饰品店的创业计划书范文
2013/12/28 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
毕业自我鉴定总结
2014/03/24 职场文书
辞职书格式样本
2015/02/26 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
思想工作总结范文
2015/08/12 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python
nginx设置资源请求目录的方式详解
2022/05/30 Servers