大家好，我是 Immerse，一名独立开发者、内容创作者、AGI 实践者。

关注公众号：沉浸式趣谈，获取最新文章（更多内容只在公众号更新）

个人网站：https://yaolifeng.com 也同步更新。

转载请在文章开头注明出处和版权信息。

我会在这里分享关于编程、独立开发、AI干货、开源、个人思考等内容。

如果本文对您有所帮助，欢迎动动小手指一键三连(点赞、评论、转发)，给我一些支持和鼓励，谢谢！

最近看到一篇文章，针对于 Safari 和 iOS 版本检测很不错，分享出来给大家。

之前都用 User-Agent 一把嗦，但文章提到检测结果不准确。

两个方式

1. User-Agent
2. 特性检测

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 能帮我们缩小范围：

// 桌面 Safari 和所有 iOS 浏览器
function isWebkit() {
    return 'GestureEvent' in window;
}

// 所有移动端 WebKit 浏览器
function isMobileWebKit() {
    return 'ongesturechange' in window;
}

// 只检测桌面 Safari
function isDesktopWebKit() {
    return typeof window !== 'undefined' && 'safari' in window && 'pushNotification' in window.safari;
}

第二步：检测特定 iOS 版本

去查 Safari 发布说明或 WebKit 的更新日志，找到某个版本新增的特性。

比如我想检测 iOS 17.0，发现这个版本加入了 contain-intrinsic-size 支持。

那就检测这个特性：

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

如果要检测具体的小版本，可以配合下一个版本的特性来排除。

比如 ManagedMediaSource 是在 iOS 17.1 才有的：

const supportsManagedMediaSource = 'ManagedMediaSource' in window;

// 只匹配 iOS 17.0
function isOnlyiOS170() {
    return isAtLeastiOS17 && !supportsManagedMediaSource;
}

if (isMobileWebKit()) {
    if (isOnlyiOS170()) {
        // 这是 iOS 17.0
    }
}

第三步：真机测试

理论归理论，实际测试才是王道。

踩坑：

iOS 17.6 的发布说明里说支持 CSS 的 safe 关键字，用 @supports 检测也返回 true。

结果真机上一跑，根本不生效。

这种情况下，只能换个思路，检测实际的渲染效果：

const isSafeKeywordSupported = () => {
    const container = document.createElement('div');
    const child = document.createElement('span');

    child.textContent = 'Evil Martians';

    container.style.display = 'flex';
    container.style.justifyContent = 'safe center';
    container.style.width = '5%';
    container.style.position = 'absolute';
    container.style.top = '-9999px';
    container.style.left = '-9999px';

    container.appendChild(child);
    document.body.appendChild(container);

    const containerRect = container.getBoundingClientRect();
    const childRect = child.getBoundingClientRect();
    const isCroppedOnLeft = childRect.left < containerRect.left;

    document.body.removeChild(container);
    return !isCroppedOnLeft;
};

通过检查元素的实际渲染位置，判断特性是不是真的生效了。

第四步：配合 UA 检测

有时候特性检测也不够用。

比如要区分 iPad 和其他设备。

iPad 的 UA 字符串跟 macOS 上的 Safari 一模一样。

但如果 UA 显示是 macOS，特性检测又显示是移动端 WebKit，那就能判断出这是 iPad：

// 检测 iPadOS
function isiPad() {
    return isDesktopWebKit() && isMobileWebKit();
}

几个关键点

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