JavaScript 判斷手機版/行動裝置

本篇紀錄如何用 JavaScript 來判斷手機版或行動裝置。以下是一個簡單判斷的方式，檢查瀏覽器的 userAgent 有沒有包含行動裝置的關鍵字，例如：iPhone、Android 等關鍵字，有的話就立即回傳 true 反之回傳 false，如下範例，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function isMobileDevice() {
  let mobileDevices = ['Android', 'webOS', 'iPhone', 'iPad', 'iPod', 'BlackBerry', 'Windows Phone']
  for (var i = 0; i < mobileDevices.length; i++) {
      if (navigator.userAgent.match(mobileDevices[i])) {
        //console.log("isMobileDevice: match " + mobileDevices[i]);
        return true;
      }
  }
  return false
}

if (isMobileDevice()) {
  console.log("is mobile device");
} else {
  console.log("not mobile device");
}

另外如果要以瀏覽器寬度來作為依據判斷的話，可以參考 Bootstrap，Bootstrap 判斷的解析度斷點以 576(xs)、768(sm)、992(md) 三種大小來分別判斷為手機、平板、電腦三種裝置。

其他參考
javascript - Detecting a mobile browser - Stack Overflow
https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser
JavaScript 侦测手机浏览器的五种方法 - 阮一峰的网络日志
https://www.ruanyifeng.com/blog/2021/09/detecting-mobile-browser.html
如何偵測使用者的裝置是否為行動裝置 | Jason’s BLOG
https://tso1158687.github.io/blog/2019/03/10/detect-mobile-device/

以上就是 JavaScript 判斷手機版/行動裝置範例介紹，
如果你覺得我的文章寫得不錯、對你有幫助的話記得 Facebook 按讚支持一下！