温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue怎么判断安卓还是IOS

发布时间:2022-04-13 10:36:12 来源:亿速云 阅读:581 作者:iii 栏目:开发技术

这篇文章主要介绍“vue怎么判断安卓还是IOS”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue怎么判断安卓还是IOS”文章能帮助大家解决问题。

    vue判断安卓还是IOS

    最近工作上遇到这样一个需求

    vue写的页面,需要同时跟安卓和ios进行交互;

    • 若是安卓,执行代码:android.finishActivity();

    • 若是IOS,执行代码:

    try { 
     window.webkit.messageHandlers.finishActivity.postMessage(""); 
     }catch(error) { 
     console.log('WKWebView post message');
    }

    所以我们需要进行一个判断

    是安卓还是IOS:因为是做的单独的APP所以没有考虑微信的问题

    finishActivity() {
            let ua = navigator.userAgent.toLowerCase();
            //android终端
            let isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1; 
            //ios终端
            let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
            
              if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
                //ios
                console.log(" 我是ios")
                //这里是和IOS商量好的写法,调用IOS的finishActivity方法
                try { 
                  window.webkit.messageHandlers.finishActivity.postMessage(""); 
                }catch(error) { 
                    console.log('WKWebView post message');
                  }
              } else(/(Android)/i.test(navigator.userAgent)) {
                //android
                console.log("我是android")
                //这里是和安卓商量好的写法,调用安卓的finishActivity方法
                android.finishActivity();            
              }       
      }

    然后就可以一个页面同时给安卓和IOS进行交互啦! 

    H5端判断安卓跟ios显示不同的背景图

    html:

    <div :class="`${isApple==true ? 'index-cont-phone' : 'index-cont'}`" ></div>

    css:

        .index-cont{
            width: 100%;
            height: auto;
            min-height: 100vh;
            overflow-x:hidden;
            background: url("https://cache.yisu.com/upload/information/20220412/112/15429.png") no-repeat;
            background-size: contain;
            margin: 0;
            padding-bottom: 199%;
            // position: fixed;
        }
        .index-cont-phone{
            width: 100%;
            height: auto;
            min-height: 100vh;
            overflow-x:hidden;
            background: url("https://cache.yisu.com/upload/information/20220412/112/15430.png") no-repeat;
            background-size: contain;
            margin: 0;
            padding-bottom: 199%;
            // position: fixed;
        }

    js:

    <script>
    export default {
        name: "index",
        data() {
            return {
                isApple:true,
                    }
                },
         },
         methods: {
           // 判断是安卓还是ios
            appDown() {
                var u = navigator.userAgent;
                var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
                var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
                if(isiOS){
                    this.isApple = true
                }else if(isAndroid){
                    this.isApple = false
                }
           },
       mounted() {
              // 调用判断ios与安卓方法
            this.appDown();
        },
     }
    </script>

    关于“vue怎么判断安卓还是IOS”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI