如何判断用户是通过Safari浏览器还是Web Clip打开我的网站？

前端判断（推荐） #

iOS设备的WebKit内核提供了专属属性用来识别Web Clip（主屏幕网页快捷方式）运行模式，判断逻辑准确率最高：

• 核心判断依据：window.navigator.standalone为布尔值类型，仅在Web Clip模式下返回true，普通Safari浏览器访问时返回false
• 完整判断代码示例：

function checkVisitSource() {
  // 先判断是否为iOS设备
  const isIOS = /iPhone|iPad|iPod/.test(navigator.userAgent);
  if (!isIOS) return '非iOS设备，无Web Clip访问场景';
  
  // 判断Web Clip模式
  if (window.navigator.standalone) {
    return 'Web Clip（主屏幕快捷方式）进入';
  }
  // 排除第三方iOS浏览器，判断是否为原生Safari
  const isNativeSafari = /Safari/.test(navigator.userAgent) && !/CriOS|FxiOS|EdgiOS|OPiOS/.test(navigator.userAgent);
  if (isNativeSafari) {
    return '原生Safari浏览器进入';
  }
  return '其他iOS第三方浏览器进入';
}

• 兼容PWA场景补充：如果你的站点配置了PWA manifest，可额外配合window.matchMedia('(display-mode: standalone)').matches判断独立运行模式，兼容更多系统场景。

服务端判断 #

可通过请求头的User-Agent字段差异做初步判断：

• 普通Safari访问的UA会同时携带Version/[版本号]和Safari/[版本号]字段
• Web Clip模式访问的UA不会携带Version/前缀的版本标识，部分场景会缺失Safari/字段

注意：服务端判断准确率低于前端方案，仅做预判断使用，优先选择前端JS判断逻辑。

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