移动端开发如何判断当前环境是ios、安卓android还是微信浏览器

红太狼 2023-06-25 06:23 5阅读 0赞

**一、需求问题**

在移动端开发中，我们有的时候需要判断当前的环境，是苹果`ios`环境、还是安卓`android`环境，还是微信浏览器环境。

**二、需求分析**

判断当前环境是`ios`、`android`还是微信，我们可以从两个值进行判断。第一个参数值是`userAgent`，`window.navigator.userAgent`，用户代理，使得服务器能够识别客户使用的操作系统及版本、`CPU`类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等等。第二个参数值是`appVersion`，`window.navigator.appVersion`，可以返回浏览器的平台和版本信息。通过这两个参数值，我们就可以判断出当前的环境。

**三、需求实现**

**1. 移动端简单判断代码实现：**

let ua = window.navigator.userAgent,
       app = window.navigator.appVersion;
       alert('浏览器版本: ' + app + '\n' + '用户代理: ' + ua);
       if(!!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){ 
           // ios端 
           console.log('ios端');
       }
       else if(ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1) { 
           // android端 
           console.log('android端');
       }
       if (ua.match(/MicroMessenger/i) == 'MicroMessenger') { 
           // 微信浏览器 
           console.log('微信浏览器');
       }

**2. 移动端详细判断代码实现：**

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.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
                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 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
                iPad: u.indexOf('iPad') > -1, //是否iPad
                webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
              };
            }(),
            language: (navigator.browserLanguage || navigator.language).toLowerCase()
          }
          
    
       if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) { 
           //如果是ios系统就执行
           console.log('这是ios系统');
          }
       else if (browser.versions.android) { 
            //如果是android系统就执行
            console.log('这是android系统');
          }
          
        var ua = navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i)=="micromessenger") { 
             console.log('这是微信浏览器')
        } else { 
            console.log('这不是微信浏览器');
            }
        }

**3. PC端与移动端的判断：**

if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {  
        //移动端
         console.log("这是移动端");
    }else{ 
        //pc端
         console.log("这是pc端");
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关移动端开发如何判断当前环境是ios、安卓android还是微信浏览器

一、需求问题在移动端开发中，我们有的时候需要判断当前的环境，是苹果`ios`环境、还是安卓`android`环境，还是微信浏览器环境。二、需求分析判断当前环境是`i

红太狼/ 2023年06月25日 06:23/ 0 赞/ 6 阅读

相关 JavaScript 判断浏览器是PC端还是移动端

JavaScript 判断浏览器是PC端还是移动端 JavaScript Browser 对象两种方法 .test( na

墨蓝/ 2023年06月02日 10:38/ 0 赞/ 34 阅读

相关 js判断当前手机是安卓还是IOS

是否是IOS isIos() { var ua = navigator.userAgent.toLocaleLowerCase()

谁借莪１个温暖的怀抱￠/ 2023年02月13日 03:39/ 0 赞/ 25 阅读

相关判断机型是安卓还是ios

判断机型是安卓还是ios <div id="btn"> <a onclick="detect" id="a"><button>打开app</but

迈不过友情╰/ 2022年11月10日 05:50/ 0 赞/ 236 阅读

相关前端判断是安卓还是IOS

var u = navigator.userAgent;//userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值 //

朴灿烈づ我的快乐病毒、/ 2022年10月07日 09:59/ 0 赞/ 199 阅读

相关判断手机是android还是ios，是否用了微信内置浏览器，判断是移动端还是pc端

$(function(){ var u = navigator.userAgent; var isAndroid = u.indexOf('An

旧城等待，/ 2022年06月07日 08:35/ 0 赞/ 262 阅读

相关判断当前客户端是pc端还是移动端还是Ipad

实现手机和电脑两种不同的布局，判断手机还是电脑:window.onload一个页面只能有一个 <!doctype html> <html> <head

我就是我/ 2022年05月21日 08:28/ 0 赞/ 359 阅读

相关 js判断访问浏览器是安卓还是ios还是微信浏览器还是微博

var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.index

末蓝、/ 2022年04月12日 11:08/ 0 赞/ 390 阅读

相关判断浏览器环境(QQ,微信,安卓设备,IOS设备,PC微信环境,移动设备)

判断浏览器环境(QQ,微信,安卓设备,IOS设备,PC微信环境,移动设备) // ===== 判断浏览器环境 ===== // // 判

叁歲伎倆/ 2022年03月31日 05:10/ 0 赞/ 309 阅读

相关判断当前是否是微信浏览器,还是APP客户端

/ 判断当前是否是微信浏览器,还是APP客户端 / function isWeixinEsz() {

我会带着你远行/ 2021年12月22日 02:45/ 0 赞/ 375 阅读