如何使用JS检测iPhone机型？避免旧机型运行高负载逻辑

1. 通过User Agent字符串解析 #

从navigator.userAgent提取iPhone型号信息，判断是否早于iPhone X，是最直接的实现方式。

function isIPhoneOlderThanX() {
  const ua = navigator.userAgent;
  if (!ua.includes('iPhone')) return false;
  
  // 匹配iPhone后的型号数字，兼容iPhone 8、iPhone 7 Plus这类格式
  const match = ua.match(/iPhone (\d+)/);
  if (!match) return false;
  
  const modelNumber = parseInt(match[1], 10);
  // iPhone X对应第10代，数字小于10的机型均低于X
  return modelNumber < 10;
}

优缺点：实现简单，适配大部分常规场景，但UA存在被修改或浏览器伪装的可能，准确性无法达到100%。

2. 利用刘海屏/安全区域特性判断 #

iPhone X及后续机型都带有刘海，系统会提供安全区域（safe area）参数，而iPhone 8及更早机型无此特性，基于硬件特性的判断比UA更可靠。

function hasIPhoneSafeArea() {
  if (!navigator.userAgent.includes('iPhone')) return false;
  
  // 通过CSS环境变量获取安全区域顶部高度
  const safeAreaTop = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--safe-area-inset-top') || '0', 10);
  // 或通过屏幕总高度与可用高度的差值判断是否存在刘海
  const hasNotch = window.screen.height - window.screen.availHeight > 20;
  
  return safeAreaTop > 0 || hasNotch;
}

// 反向推导低于iPhone X的机型
function isIPhoneOlderThanX() {
  return navigator.userAgent.includes('iPhone') && !hasIPhoneSafeArea();
}

优缺点：准确性优于UA解析，不会被UA伪装影响，但需先判断设备为iPhone，避免误判其他带刘海的非苹果设备。

3. 直接检测设备性能（替代机型判断） #

核心需求是避免低性能设备崩溃，可跳过机型检测，直接验证设备能否承载高负载功能：

• WebGL版本检测：iPhone X及以后支持WebGL 2.0，iPhone 8及更早仅支持WebGL 1.0

function supportsWebGL2() {
  const canvas = document.createElement('canvas');
  return !!canvas.getContext('webgl2');
}

• 相机与性能预校验：调用相机前，先尝试获取媒体设备权限，同时可结合mediaDevices.enumerateDevices()判断设备硬件支持情况，搭配简单的WebGL渲染帧率测试，进一步验证设备性能。

优缺点：完全贴合实际需求，无需纠结机型迭代，直接判断设备能力，避免因机型误判导致的功能限制或崩溃问题。

内容的提问来源于stack exchange，提问作者xVarlordx