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的简单九宫格实现代码
Aug 09 Javascript
js实现仿百度瀑布流的方法
Feb 05 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 Javascript
基于jQuery实现点击列表加载更多效果
May 31 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
JavaScript逻辑运算符相关总结
Sep 04 Javascript
vue实现简易的双向数据绑定
Dec 29 Vue.js
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 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
MySQL连接数超过限制的解决方法
2011/07/17 PHP
PHP setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
nodejs文件操作模块FS(File System)常用函数简明总结
2014/06/05 NodeJs
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
2016/10/21 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
python正则表达式re模块详解
2014/06/25 Python
python关闭windows进程的方法
2015/04/18 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
Java的基础面试题附答案
2016/01/10 面试题
毕业生求职信的经典写法
2014/01/31 职场文书
计算机专业职业规划
2014/02/28 职场文书
工程资料员岗位职责
2014/03/10 职场文书
环境工程专业自荐信范文
2014/03/18 职场文书
庆元旦演讲稿
2014/09/15 职场文书
军训阅兵新闻稿
2015/07/17 职场文书