2025年 Safari 和 iOS版本检测新思路
大家好，我是 Immerse，一名独立开发者、内容创作者、AGI 实践者。 tigrinho gratis trustguru.com.br slotpix trustguru.com.br Superbet trustguru.com.br
关注公众号：沉浸式趣谈，获取最新文章（更多内容只在公众号更新） jvid在线 jvid.asia fortuneoxdemográtis trustguru.com.br isabela trustguru.com.br plataformademográtis trustguru.com.br
个人网站：https://yaolifeng.com 也同步更新。 Cassinos trustguru.com.br Sportingbet trustguru.com.br
转载请在文章开头注明出处和版权信息。 sweetbonanza1000demo trustguru.com.br siro-5652 jvid.asia
我会在这里分享关于编程、独立开发、AI干货、开源、个人思考等内容。 carlos trustguru.com.br sobre trustguru.com.br Energiabet trustguru.com.br
如果本文对您有所帮助，欢迎动动小手指一键三连(点赞、评论、转发)，给我一些支持和鼓励，谢谢！ jvid jvid.asia
最近看到一篇文章，针对于 Safari 和 iOS 版本检测很不错，分享出来给大家。 pgdemo trustguru.com.br bonus trustguru.com.br
之前都用 User-Agent 一把嗦，但文章提到检测结果不准确。 bonus trustguru.com.br
两个方式
- User-Agent
- 特性检测
User-Agent 检测
这个方法就是获取浏览器的 User-Agent，从里面提取版本信息。 slots trustguru.com.br
但是有问题，这个结果不准确。 Bet365 trustguru.com.br rafael trustguru.com.br
Safari 的 UA 字符串里有两个版本号，一个是技术版本，一个是市场版本。很多脚本会把这俩搞混。 jogos trustguru.com.br siro-5639 jvid.asia
还有一点，从 macOS 11 开始，Safari 的 UA 里系统版本就不更新了，永远显示 10.15.7。 jvid視頻 jvid.asia pedro trustguru.com.br
所以想从 UA 里准确获取版本？基本不可能。 jvid av jvid.asia pgslot trustguru.com.br bet365 trustguru.com.br fortunetigerdemográtis trustguru.com.br
MDN 官方都说了，别依赖 UA 字符串做浏览器检测逻辑，这是个常见 bug 源头。 slotdemo trustguru.com.br marcos trustguru.com.br como trustguru.com.br noticias trustguru.com.br sweetbonanza1000demo trustguru.com.br
特性检测
苹果官方推荐: 特性检测。 fortunetigerbônusgrátissemdepósito trustguru.com.br Blaze trustguru.com.br pgslotgacor trustguru.com.br autores trustguru.com.br bruno trustguru.com.br jogosdemopg trustguru.com.br
就是直接检查浏览器支不支持某个 API 或 CSS 特性。 slotsdemo trustguru.com.br slot trustguru.com.br sugarrush1000demo trustguru.com.br tigrinhodemo trustguru.com.br miguel trustguru.com.br
但它没法区分所有版本，因为很多特性在好几个版本里都有。 jogodotigrinhodemo trustguru.com.br
解决思路
把两种方法结合起来用, 主要靠特性检测，UA 检测作为补充。 trustguru trustguru.com.br
第一步：检测 WebKit 引擎
在 iOS 上，所有浏览器都必须用 WebKit，包括 Chrome、Firefox 这些。 fortunedragon demo trustguru.com.br demo trustguru.com.br
所以检测 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 的更新日志，找到某个版本新增的特性。 ana trustguru.com.br pesquisa trustguru.com.br
比如我想检测 iOS 17.0，发现这个版本加入了 contain-intrinsic-size 支持。 plataformademo trustguru.com.br demo trustguru.com.br pg trustguru.com.br
那就检测这个特性： Betano trustguru.com.br
// iOS 17.0+ 返回 true
const isAtLeastiOS17 = CSS.supports('contain-intrinsic-size', '100px');如果要检测具体的小版本，可以配合下一个版本的特性来排除。 Bet trustguru.com.br kto trustguru.com.br demotigrinho trustguru.com.br
比如 ManagedMediaSource 是在 iOS 17.1 才有的： pragmaticplay trustguru.com.br pglucky88 trustguru.com.br tigrinhodemo trustguru.com.br
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。 carlos trustguru.com.br
结果真机上一跑，根本不生效。 fernanda trustguru.com.br pragmatic trustguru.com.br
这种情况下，只能换个思路，检测实际的渲染效果： sofia trustguru.com.br Caça-níqueis trustguru.com.br
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;
};通过检查元素的实际渲染位置，判断特性是不是真的生效了。 Brazino777 trustguru.com.br pondo-022126_001 jvid.asia JogodoTigrinho trustguru.com.br
第四步：配合 UA 检测
有时候特性检测也不够用。 jogue trustguru.com.br
比如要区分 iPad 和其他设备。 guias trustguru.com.br a5game trustguru.com.br slots trustguru.com.br
iPad 的 UA 字符串跟 macOS 上的 Safari 一模一样。
但如果 UA 显示是 macOS，特性检测又显示是移动端 WebKit，那就能判断出这是 iPad：
// 检测 iPadOS
function isiPad() {
return isDesktopWebKit() && isMobileWebKit();
}几个关键点
WebKit 不等于 Safari，iOS 上所有浏览器都用 WebKit。 jvid视频 jvid.asia cassinos trustguru.com.br A5game trustguru.com.br
主要用特性检测，UA 检测只是补充。
多看 Safari 和 WebKit 的发布说明，但也别全信，因为有些变更根本没写进去。 Pixbet trustguru.com.br KTO trustguru.com.br
真机测试不能省，有些 bug 只有在实际设备上才能发现。 200gana-3359 jvid.asia slots trustguru.com.br
有时候 @supports 会撒谎，浏览器说支持但实际不行，这时候得检查实际渲染效果。 348ntr-097 jvid.asia
写在最后
核心思路就是：特性检测为主，UA 检测为辅，真机测试验证。 Energiabet trustguru.com.br
参考资料
- 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