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 相关文章推荐
jQuery中closest()函数用法实例
Jan 07 Javascript
使用JavaScript+canvas实现图片裁剪
Jan 30 Javascript
JavaScript节点及列表操作实例小结
Aug 05 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
Nov 15 Javascript
js原生方法被覆盖,从新赋值原生的方法
Jan 02 Javascript
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
浅谈vux之x-input使用以及源码解读
Nov 04 Javascript
vue webpack重写cookie路径的方法
Jul 10 Javascript
js实现图片3D轮播效果
Sep 21 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 Javascript
JavaScript前端实现压缩图片功能
Mar 06 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
Laravel ORM 数据model操作教程
2019/10/21 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
javascript正则表达式使用replace()替换手机号的方法
2015/01/19 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
ant-design-vue 实现表格内部字段验证功能
2019/12/16 Javascript
Angular利用HTTP POST下载流文件的步骤记录
2020/07/26 Javascript
js+canvas实现画板功能
2020/09/13 Javascript
python用字典统计单词或汉字词个数示例
2014/04/22 Python
python批量同步web服务器代码核心程序
2014/09/01 Python
Windows下PyMongo下载及安装教程
2015/04/27 Python
django模板语法学习之include示例详解
2017/12/17 Python
Django 中使用流响应处理视频的方法
2018/07/20 Python
python bmp转换为jpg 并删除原图的方法
2018/10/25 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
Python TCP通信客户端服务端代码实例
2019/11/21 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
Python实现动态循环输出文字功能
2020/05/07 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
《圆明园的毁灭》教学反思
2014/02/28 职场文书
广告宣传策划方案
2014/05/21 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
爱心助学感谢信
2015/01/21 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
高三语文教学反思
2016/02/16 职场文书
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS