2025年 Safari 和 iOS版本检测新思路

大家好，我是 Immerse，一名独立开发者、内容创作者、AGI 实践者。
关注公众号：沉浸式趣谈，获取最新文章（更多内容只在公众号更新）
个人网站：https://yaolifeng.com 也同步更新。
转载请在文章开头注明出处和版权信息。
我会在这里分享关于编程、独立开发、AI干货、开源、个人思考等内容。
如果本文对您有所帮助，欢迎动动小手指一键三连(点赞、评论、转发)，给我一些支持和鼓励，谢谢！
最近看到一篇文章，针对于 Safari 和 iOS 版本检测很不错，分享出来给大家。
之前都用 User-Agent 一把嗦，但文章提到检测结果不准确。
两个方式

• User-Agent
  
• 特性检测
  

User-Agent 检测

这个方法就是获取浏览器的 User-Agent，从里面提取版本信息。
但是有问题，这个结果不准确。
Safari 的 UA 字符串里有两个版本号，一个是技术版本，一个是市场版本。很多脚本会把这俩搞混。
还有一点，从 macOS 11 开始，Safari 的 UA 里系统版本就不更新了，永远显示 10.15.7。
所以想从 UA 里准确获取版本？基本不可能。
MDN 官方都说了，别依赖 UA 字符串做浏览器检测逻辑，这是个常见 bug 源头。
特性检测

苹果官方推荐: 特性检测。
就是直接检查浏览器支不支持某个 API 或 CSS 特性。
但它没法区分所有版本，因为很多特性在好几个版本里都有。
解决思路

把两种方法结合起来用, 主要靠特性检测，UA 检测作为补充。
第一步：检测 WebKit 引擎

在 iOS 上，所有浏览器都必须用 WebKit，包括 Chrome、Firefox 这些。
所以检测 WebKit 能帮我们缩小范围：

1. // 桌面 Safari 和所有 iOS 浏览器
2. function isWebkit() {
3.     return 'GestureEvent' in window;
4. }
6. // 所有移动端 WebKit 浏览器
7. function isMobileWebKit() {
8.     return 'ongesturechange' in window;
9. }
11. // 只检测桌面 Safari
12. function isDesktopWebKit() {
13.     return typeof window !== 'undefined' && 'safari' in window && 'pushNotification' in window.safari;
14. }

复制代码

第二步：检测特定 iOS 版本

去查 Safari 发布说明或 WebKit 的更新日志，找到某个版本新增的特性。
比如我想检测 iOS 17.0，发现这个版本加入了 contain-intrinsic-size 支持。
那就检测这个特性：

1. // iOS 17.0+ 返回 true
2. const isAtLeastiOS17 = CSS.supports('contain-intrinsic-size', '100px');

复制代码

如果要检测具体的小版本，可以配合下一个版本的特性来排除。
比如 ManagedMediaSource 是在 iOS 17.1 才有的：

1. const supportsManagedMediaSource = 'ManagedMediaSource' in window;
3. // 只匹配 iOS 17.0
4. function isOnlyiOS170() {
5.     return isAtLeastiOS17 && !supportsManagedMediaSource;
6. }
8. if (isMobileWebKit()) {
9.     if (isOnlyiOS170()) {
10.         // 这是 iOS 17.0
11.     }
12. }

复制代码

第三步：真机测试

理论归理论，实际测试才是王道。
踩坑：
iOS 17.6 的发布说明里说支持 CSS 的 safe 关键字，用 @supports 检测也返回 true。
结果真机上一跑，根本不生效。
这种情况下，只能换个思路，检测实际的渲染效果：

1. const isSafeKeywordSupported = () => {
2.     const container = document.createElement('div');
3.     const child = document.createElement('span');
5.     child.textContent = 'Evil Martians';
7.     container.style.display = 'flex';
8.     container.style.justifyContent = 'safe center';
9.     container.style.width = '5%';
10.     container.style.position = 'absolute';
11.     container.style.top = '-9999px';
12.     container.style.left = '-9999px';
14.     container.appendChild(child);
15.     document.body.appendChild(container);
17.     const containerRect = container.getBoundingClientRect();
18.     const childRect = child.getBoundingClientRect();
19.     const isCroppedOnLeft = childRect.left < containerRect.left;
21.     document.body.removeChild(container);
22.     return !isCroppedOnLeft;
23. };

复制代码

通过检查元素的实际渲染位置，判断特性是不是真的生效了。
第四步：配合 UA 检测

有时候特性检测也不够用。
比如要区分 iPad 和其他设备。
iPad 的 UA 字符串跟 macOS 上的 Safari 一模一样。
但如果 UA 显示是 macOS，特性检测又显示是移动端 WebKit，那就能判断出这是 iPad：

1. // 检测 iPadOS
2. function isiPad() {
3.     return isDesktopWebKit() && isMobileWebKit();
4. }

复制代码

几个关键点

WebKit 不等于 Safari，iOS 上所有浏览器都用 WebKit。
主要用特性检测，UA 检测只是补充。
多看 Safari 和 WebKit 的发布说明，但也别全信，因为有些变更根本没写进去。
真机测试不能省，有些 bug 只有在实际设备上才能发现。
有时候 @supports 会撒谎，浏览器说支持但实际不行，这时候得检查实际渲染效果。
写在最后

核心思路就是：特性检测为主，UA 检测为辅，真机测试验证。
参考资料

• https://developer.apple.com/documentation/safari-release-notes
  
• https://webkit.org/
  
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Browser_detection_using_the_user_agent
  

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！