關於網路那些事...

網路行銷,SEO,網路趨勢,教學文章,網頁設計,生活時事

Javascript 判斷移動裝置,以及iPhone, iPad手機 ios 板本

推薦的方式

判斷移動裝置或版本的最佳方式,還是建議使用完整的 Library

mobile-detect.js

若你需要一個快速可以套用在現成專案的作法,則可以參考下方:

判斷移動裝置

雖然這個判斷無法完全涵蓋所有移動裝置,仍適用於各主流的裝置

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

判斷IOS版本

這個判斷方法適用於 iOS 2.0 之後的版本

/* 
  [ Detect iOS Version ]
  supports iOS 2.0 or latter
  call iOSversion() function will get:
    status: boolean;  -- get iOS version: true, none: false
    version: int; -- ex 11
    info: string; -- ex IOS 11.2.6 
*/
function iOSversion() {
  let d, v;
  if (/iP(hone|od|ad)/.test(navigator.platform)) {
    v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
    d = {
      status: true,
      version: parseInt(v[1], 10) , 
      info: parseInt(v[1], 10)+'.'+parseInt(v[2], 10)+'.'+parseInt(v[3] || 0, 10)
    };
  }else{
    d = {status:false, version: false, info:''}
  }
  return d;
}

使用方式

let iosVer = iOSversion();
if (iosVer.status) {
  alert('iOS : '+iosVer.info+', version : '+iosVer.version);
  //ex. IOS 11.2.6, version 11

}else{
  console.log('not iPhone or iPad');
}

若使用者在 iphone 使用 chrome 瀏覽器

仍可以透過上述的方式取得版本號


如果你喜歡我們的文章內容,請在這裡按個讚



最新文章推薦