如何在客户端判断iPhoneX的PWA访问场景以调整底部UI？

刚好之前处理过类似的PWA适配问题，给你分享几个靠谱的方案，既能精准判断场景，又能优雅解决UI和系统手势冲突的问题。

一、核心判断逻辑：三个关键条件 #

要精准定位「iPhoneX系列设备的PWA独立运行场景」，需要同时满足三个条件：

• 当前是PWA独立模式：也就是用户把Web应用添加到主屏幕后打开，而非在Safari浏览器里访问
• 设备是iPhoneX及后续机型：这类设备有底部的安全区域，容易和UI产生冲突
• 设备属于iOS系统：避免误判其他类似尺寸的安卓设备

方案1：用JavaScript判断场景 #

可以写一个工具函数来整合这三个判断条件：

function isIPhoneXInPWA() {
  // 判断是否为PWA独立模式（兼容新旧iOS版本）
  const isStandalone = window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone;
  // 判断是否是iPhoneX及后续有安全区域的设备（通过屏幕尺寸和像素比）
  const isIPhoneXSeries = window.matchMedia('(max-width: 414px) and (min-height: 812px) and (-webkit-min-device-pixel-ratio: 2)').matches;
  // 判断是否为iOS设备
  const isIOS = /iPhone|iPad|iPod/.test(navigator.userAgent) && !window.MSStream;

  return isStandalone && isIPhoneXSeries && isIOS;
}

判断后就可以动态调整UI：

if (isIPhoneXInPWA()) {
  // 给底部UI元素添加适配类，或者直接修改样式
  const bottomUI = document.querySelector('.your-bottom-ui');
  bottomUI.classList.add('pwa-iphonex-adjust');
}

对应的CSS样式：

.pwa-iphonex-adjust {
  /* 用安全区域高度作为底部内边距，完美避开系统手势区域 */
  padding-bottom: env(safe-area-inset-bottom);
}

方案2：纯CSS媒体查询（更简洁） #

如果不需要额外的JS逻辑，直接用CSS媒体查询就能实现场景判断和样式调整，代码更简洁：

/* 仅在iPhoneX系列的PWA独立模式下生效 */
@media (display-mode: standalone) and (max-width: 414px) and (min-height: 812px) and (-webkit-min-device-pixel-ratio: 2) {
  .your-bottom-ui {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

这个方案利用display-mode: standalone判断PWA模式，结合屏幕尺寸和像素比定位iPhoneX系列设备，再用env(safe-area-inset-bottom)直接获取系统安全区域的高度，完全不需要写JS。

二、额外说明 #

• env(safe-area-inset-bottom)是iOS 11及以上版本支持的环境变量，能精准获取底部安全区域的高度，比手动计算更可靠
• 如果你需要兼容更早的iOS版本，可以把window.navigator.standalone的判断保留，旧版本的iOS添加到主屏幕后会设置这个属性为true
• 媒体查询里的尺寸是针对竖屏场景，如果你的应用支持横屏，可以补充横屏的媒体查询条件

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