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 相关文章推荐
js 判断checkbox是否选中的操作方法
Nov 09 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
sencha ext js 6 快速入门(必看)
Jun 01 Javascript
Bootstrap对话框使用实例讲解
Sep 24 Javascript
需要牢记的JavaScript基础知识
Sep 25 Javascript
详解javascript事件绑定使用方法
Oct 20 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
使用 bootstrap modal遇到的问题小结
Nov 09 Javascript
详解vue-cli构建项目反向代理配置
Sep 07 Javascript
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
react使用CSS实现react动画功能示例
May 18 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的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
一组PHP加密解密函数分享
2014/06/05 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
2011/10/11 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
javascript手工制作悬浮菜单
2015/02/12 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
深入理解python对json的操作总结
2017/01/05 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
python如何导入依赖包
2020/07/13 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
pymysql模块使用简介与示例
2020/11/17 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
竞聘书怎么写,如何写?
2014/03/31 职场文书
在职证明范本
2015/06/15 职场文书
话题作文之生命的旋律
2019/12/17 职场文书
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL