js识别当前设备是pc端 | 移动端 | pad端

南半球与北海道#

已于 2023-06-09 10:23:54 修改

阅读量3.3k

点赞数 1

文章标签： javascript 开发语言 ecmascript

于 2023-06-09 10:19:57 首次发布

本文链接：https://blog.csdn.net/tt1234561009/article/details/131121846

版权

在项目开发中，为了兼容PC和移动设备，文章提供了一段JavaScript代码，用于检测设备类型，包括手机、平板和电脑。这段代码首先获取用户代理信息，然后通过正则表达式判断操作系统，如Android、iOS、WindowsPhone等，最后根据设备类型进行日志输出。这段逻辑可以保存在Vuex中，供不同页面使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目开发中很多时候会遇到要求系统既要在pc中运行也可以在手机上访问的需求，这是时候就需要判断一下系统运行的平台来做页面适配。

在main.js中添加如下代码

(function identifyDevicePlatform() {
  var os = function () {
    var ua = navigator.userAgent,
      isWindowsPhone = /(?:Windows Phone)/.test(ua),
      isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
      isAndroid = /(?:Android)/.test(ua),
      isFireFox = /(?:Firefox)/.test(ua),
      isChrome = /(?:Chrome|CriOS)/.test(ua),
      isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || 
                 (isFireFox && /(?:Tablet)/.test(ua)),
      isPhone = /(?:iPhone)/.test(ua) && !isTablet,
      isPc = !isPhone && !isAndroid && !isSymbian;
      return {
        isTablet: isTablet,
        isPhone: isPhone,
        isAndroid: isAndroid,
        isPc: isPc
      };
    }();
  console.log('os', os)
  if (os.isAndroid || os.isPhone) {
    // 手机
    console.log("---------手机");
  } else if (os.isTablet) {
    // 平板
    console.log("---------平板");
  } else if (os.isPc) {
    // 电脑
    console.log("---------电脑");
  }
})();