モバイル端末の開発は、現在の環境がios、アンドロイドandroid、または微信ブラウザであるかをどのように判断するか


一、需要問題
モバイル端末の開発では、現在の環境がアップルios環境なのか、アンドロイドandroid環境なのか、微信ブラウザ環境なのかを判断する必要がある場合があります.
二、需要分析
現在の環境がiosandroidそれともウィーチャットなのか、2つの値から判断できます.1つ目のパラメータ値はuserAgentwindow.navigator.userAgent、ユーザエージェントにより、サーバがユーザが使用するオペレーティングシステムおよびバージョンを認識できるようにするCPUタイプ、ブラウザおよびバージョン、ブラウザレンダリングエンジン、ブラウザ言語、ブラウザプラグインなどである.2番目のパラメータ値はappVersionwindow.navigator.appVersionで、ブラウザのプラットフォームとバージョン情報を返すことができます.この2つのパラメータ値により,現在の環境を判断できる.
三、需要実現
1.モバイル端末の簡単な判断コードの実現:
let ua = window.navigator.userAgent,
   app = window.navigator.appVersion;
   alert('     : ' + app + '
'
+ ' : ' + 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 ");
}