本文介绍一种基于 css 特性查询（@supports）的可靠方案，精准识别 ios 设备（含 safari、chrome/firefox for ios），并在页面滚动时为底部导航栏（navbar）动态增加高度，解决 ios 视口缩放导致的 navbar 压缩问题。
本文介绍一种基于 css 特性查询（@supports）的可靠方案，精准识别 ios 设备（含 safari、chrome/firefox for ios），并在页面滚动时为底部导航栏（navbar）动态增加高度，解决 ios 视口缩放导致的 navbar 压缩问题。
在 iOS 移动端浏览器（包括所有基于 WebKit 的 iOS 浏览器）中，当用户向下滚动页面时，地址栏会自动收起，系统会动态压缩视口高度（viewport height），但该变化不会触发 resize 事件，却会导致 position: fixed; bottom: 0 的底部导航栏被“顶起”或视觉上变矮——实际是视口高度突变导致元素相对定位偏移，而非样式被重写。因此，单纯设置固定高度（如 height: 65px）无法应对这一行为。
要实现「仅在 iOS 上、滚动后提升 navbar 高度」的效果，关键在于：
✅ 精准检测 iOS 设备（排除 Android、桌面端）；
✅ 在滚动状态下应用增强样式（例如将高度从 65px 提升至 80px）；
✅ 保持代码轻量、兼容现代浏览器，且不依赖 JavaScript 检测 UA（易被绕过或失效）。
✅ 推荐方案：使用 @supports (-webkit-touch-callout: none)
这是目前最稳定、语义清晰的 iOS 专属检测方式。原因如下：
- -webkit-touch-callout 是 Safari on iOS 独有的私有 CSS 属性（MDN 文档）；
- 所有 iOS 浏览器（包括 Chrome/Firefox for iOS）均强制使用 WebKit 渲染引擎，因此该特性始终存在；
- @supports 规则在非 iOS 浏览器中自然失效，无需额外兜底逻辑。
/* 默认 navbar 样式（全平台生效） */
.navbar-footer {
display: none;
position: fixed;
bottom: -1px;
left: 0;
right: 0;
height: 65px;
background-color: #fff;
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);
z-index: 2;
}
/* 仅 iOS：滚动后提升 navbar 高度（解决视口压缩导致的视觉收缩） */
@supports (-webkit-touch-callout: none) {
.navbar-footer.scrolled {
height: 80px; /* 根据实际需求调整，建议比默认高 10–15px */
}
}? 注意：.scrolled 类需由 JavaScript 在检测到滚动行为后动态添加（推荐监听 scroll 事件并节流）。例如在 React 中：
useEffect(() => { const handleScroll = () => { const navbar = document.querySelector('.navbar-footer'); if (navbar) { navbar.classList.toggle('scrolled', window.scrollY > 10); } }; const throttle = (fn: () => void, delay = 100) => { let timeoutId: NodeJS.Timeout; return () => { clearTimeout(timeoutId); timeoutId = setTimeout(fn, delay); }; }; window.addEventListener('scroll', throttle(handleScroll)); return () => window.removeEventListener('scroll', throttle(handleScroll)); }, []);
⚠️ 重要注意事项
- ❌ 不要使用 navigator.userAgent 检测 iOS：iOS 17+ 已限制 UA 字符串真实性，且 Chrome/Firefox for iOS UA 中仍含 "iPhone"，但不可靠；
- ❌ 避免已废弃属性：如 -webkit-overflow-scrolling: touch 已被 iOS 移除，不再可用；
- ✅ 优先考虑设计降级：若非强需求，可改用 env(safe-area-inset-bottom) + padding-bottom 方案适配全面屏，更符合响应式原则；
- ? 兼容性说明：@supports 在 IE 中完全不支持（IE 会忽略整段规则），但 IE 已无 iOS 端，故无影响；现代 Safari/Chrome/Firefox on iOS 均完美支持。
✅ 总结
通过 @supports (-webkit-touch-callout: none) 实现 iOS 精准样式隔离，配合 .scrolled 类动态控制 navbar 高度，是当前兼顾兼容性、可维护性与准确性的最佳实践。该方案不侵入业务逻辑、无需第三方库、零运行时开销，适合集成于 React、Vue 或纯静态站点中。
