vue如何判斷安卓還是IOS

2022-04-12 19:00:35

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://s3.ap-northeast-1.wasabisys.com/img.it145.com/202204/main_bg3zqnc42jt1ek.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://s3.ap-northeast-1.wasabisys.com/img.it145.com/202204/main_bg4belvkvmddqr.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>

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。

vue如何判斷安卓還是IOS

目錄

vue判斷安卓還是IOS

最近工作上遇到這樣一個需求

所以我們需要進行一個判斷

H5端判斷安卓跟ios顯示不同的背景圖

熱門文章