vue怎么判斷安卓還是IOS

這篇文章主要介紹“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”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。