首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >js 判断设备类型包括异形屏

js 判断设备类型包括异形屏

作者头像
蓓蕾心晴
发布2025-09-05 08:26:11
发布2025-09-05 08:26:11
10000
代码可运行
举报
文章被收录于专栏:前端小叙前端小叙
运行总次数:0
代码可运行

本方法主要判断设备为手机、平板、异形屏(覆盖不全,能覆盖大多数)

代码语言:javascript
代码运行次数:0
运行
复制
export enum DEVICE {
  PHONE = 'phone',
  PAD = 'pad',
  SPECIAL = 'special-shape'
}


function getPlatform () {
  const userAgent = navigator.userAgent.toLowerCase()

  // 已知的部分折叠屏设备的关键字列表
  const foldableKeywords = [
    'samsung galaxy z fold',
    'samsung galaxy z flip',
    'huawei mate x',
    'huawei p50 pocket',
    'motorola razr',
    'oppo find n'
  ]

  // 正则表达式:匹配三星折叠屏设备
  const pattern = /sm-f\d{4}/

  const clientWidth = document.documentElement.clientWidth
  const clientHeight = document.documentElement.clientHeight

  const min = Math.min(clientWidth, clientHeight)
  const max = Math.max(clientWidth, clientHeight)
  const aspectRatio = min / max


  if (pattern.test(userAgent) || foldableKeywords.some(keyword => userAgent.includes(keyword))) {
    // 折叠屏判断逻辑
    if (aspectRatio < 0.85) {
      return DEVICE.PHONE
    } else {
      // 宽高很接近时,判定为异型屏手机
      return DEVICE.SPECIAL
    }
  } else {
    // 非折叠屏走正常判断
    const isIpad = /ipad/.test(userAgent)
    // const isAndroidTablet = /android/.test(userAgent) && !/mobile/.test(userAgent) // 2025-08-01 Android Pad 正则有问题,会把折叠屏手机误判为平板
    const isIpadOS = navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1
    const specialSize = (clientWidth > 700 && clientHeight > 1000) || (clientWidth > 1000 && clientHeight > 700)

    if (isIpad || isIpadOS || specialSize) {
      return DEVICE.PAD
    } else {
      if (aspectRatio < 0.85) {
        // if (isAndroidTablet) {
        //   return DEVICE.PAD
        // }
        return DEVICE.PHONE
      } else {
        // 宽高很接近时,判定为异型屏手机
        return DEVICE.SPECIAL
      }
    }
  }
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-09-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档