根源是ipad横屏逻辑分辨率1024px≥bootstrap 5 navbar-expand-lg断点992px，导致不折叠；应改用navbar-expand-md并严格设置viewport，必要时用js检测ipad横屏。
Bootstrap 5 导航栏在 iPad 横屏不折叠的根源
根本原因是 iPad 横屏（1024px 宽）刚好卡在 Bootstrap 5 默认的 navbar-expand-lg 断点（≥992px）上，而多数 iPad 横屏逻辑分辨率是 1024×768 或 1024×690（缩放后），浏览器报告的 window.innerWidth 往往 ≥992px，导致 navbar 不触发折叠。
改用 navbar-expand-md 或更小断点
最直接有效的做法是降级断点：把 navbar-expand-lg 换成 navbar-expand-md（生效阈值 ≥768px），这样 iPad 横屏（1024px）仍满足条件，但关键在于——它让折叠按钮在更小视口就可用，避免“看似该折叠却没按钮”的错觉。
实操建议：
- 将原 class
navbar navbar-expand-lg改为navbar navbar-expand-md - 确保折叠容器仍用
navbar-collapse+id，且data-bs-target指向正确 - 不要只改 class 却漏掉
navbar-toggler的data-bs-target同步更新 - 如果项目已自定义 CSS 媒体查询，检查是否意外覆盖了
@media (max-width: 767.98px)下的折叠逻辑
iPad Safari 的 viewport 缩放会让断点失效
iPad 横屏时若用户双指缩放或页面被强制缩放，window.innerWidth 可能失真，导致媒体查询匹配错误。这不是 Bootstrap bug，而是 Safari 对缩放后视口宽度的报告策略问题。
缓解方法：
- 在
中加严格 viewport：<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> - 避免全局设置
body { zoom: ... }或transform: scale() - 不用
min-device-width媒体查询——它在现代 Safari 已被弃用且行为不可靠
需要精准控制 iPad 横屏？用 JavaScript 补充检测
纯 CSS 断点无法区分“1024px 宽的桌面显示器”和“1024px 宽的 iPad”，若业务强依赖此区分（比如仅对 iPad 横屏显示特殊菜单），得靠 JS 判断设备特性：
if (/iPad/.test(navigator.userAgent) && window.innerWidth >= 1024) {
document.body.classList.add('ipad-landscape');
// 然后用 .ipad-landscape .navbar { --bs-navbar-toggle-display: flex; }
}
注意点：
- 别依赖
navigator.platform === 'MacIntel'，M1/M2 iPad 也会返回这个值 - 优先用
navigator.userAgent.includes('iPad')，iOS 13+ 仍可靠 - 这个逻辑必须在 DOM 加载后、navbar 渲染前执行，否则样式来不及应用
