惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

P
Proofpoint News Feed
博客园 - 聂微东
Application and Cybersecurity Blog
Application and Cybersecurity Blog
MyScale Blog
MyScale Blog
罗磊的独立博客
H
Help Net Security
L
LangChain Blog
T
Threat Research - Cisco Blogs
量子位
S
Securelist
Last Week in AI
Last Week in AI
L
Lohrmann on Cybersecurity
T
The Exploit Database - CXSecurity.com
P
Privacy International News Feed
The Hacker News
The Hacker News
Vercel News
Vercel News
D
Darknet – Hacking Tools, Hacker News & Cyber Security
C
Cybersecurity and Infrastructure Security Agency CISA
T
The Blog of Author Tim Ferriss
T
Threatpost
Security Latest
Security Latest
P
Palo Alto Networks Blog
Microsoft Security Blog
Microsoft Security Blog
NISL@THU
NISL@THU
F
Full Disclosure
WordPress大学
WordPress大学
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
Stack Overflow Blog
Stack Overflow Blog
C
Check Point Blog
Hacker News - Newest:
Hacker News - Newest: "LLM"
酷 壳 – CoolShell
酷 壳 – CoolShell
H
Heimdal Security Blog
J
Java Code Geeks
Recorded Future
Recorded Future
Hugging Face - Blog
Hugging Face - Blog
G
GRAHAM CLULEY
Know Your Adversary
Know Your Adversary
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
阮一峰的网络日志
阮一峰的网络日志
U
Unit 42
B
Blog RSS Feed
月光博客
月光博客
C
Cisco Blogs
V
Visual Studio Blog
D
DataBreaches.Net
H
Hacker News: Front Page
博客园 - 叶小钗
N
News and Events Feed by Topic
爱范儿
爱范儿
A
Arctic Wolf

博客园 - 蓓蕾心晴

语雀思维导图如何导入到飞书文档 js 实现点击触发复制口令到剪贴板,并跳转 css 背景模糊在真机测试会出现黑色蒙层闪现问题解决 华为鸿蒙手机通过Chrome DevTools调试App内WebView页面 vscode左侧搜索栏搜索时排除不参与搜索的文件夹 css动画已经执行过一次如何再次执行? vscode设置单击选中带连字符的单词 移动端盒子元素实现左右可滑动且竖向页面可滑动 element ui 日期组件实现仅显示日期选择但值包含固定的时间 master远端代码更新,本地拉取不到 css 实现刘海屏样式兼容并支持 js 获取刘海屏高度后动态修改 css 判断在支持某些属性的情况下再添加样式 vue3 provide的值 在回调函数中改变,inject 如何获取到最新的值? vue3如何将 app 全局变量对象变为响应式并监听到某个属性的改变 ResizeObserver loop completed with undelivered notifications. 报错 git 修改本地仓库的远程仓库地址 git突然无法推送到远程仓库 css实现图片等比例完全展示,背景加图片 200%放大虚化 element-ui 使用 el-date-picker 如何限制时间选择范围? element-ui 使用 el-date-picker 如何监听数据变更?
js 判断设备类型包括异形屏
蓓蕾心晴 · 2025-09-03 · via 博客园 - 蓓蕾心晴

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

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
      }
    }
  }
}