本文介绍在 safari 和 microsoft edge 阅读模式下适配 ui 的可靠方法，重点推荐语义化 html 与 aria 角色的原生支持方案，并补充 javascript 检测与 css 回退策略，兼顾兼容性与未来稳定性。
浏览器的阅读模式（如 Safari 的 Reader View、Edge 的 Immersive Reader、Firefox 的 Reader Mode）旨在为用户提供专注、无干扰的纯内容阅读体验。它们会自动剥离广告、导航栏、侧边栏等“非核心内容”，但其过滤逻辑并非完全可控——某些自定义组件（如悬浮按钮、进度条、评论入口）可能因语义不明确而意外保留在阅读视图中。此时，开发者需要一种稳定、可维护且符合 Web 标准的方式实现针对性隐藏。
✅ 首选方案：语义化 HTML + ARIA 角色（推荐）
阅读模式引擎（尤其是基于 Chromium 和 WebKit 的实现）普遍依赖 HTML 语义结构和辅助技术属性进行内容筛选。因此，无需 JavaScript 或特殊媒体查询，仅通过语义化标记即可自然规避渲染：
- 使用语义化
- 为不具备对应语义标签的容器显式添加 role="navigation"、role="complementary"、role="dialog" 或 role="application"。
✅ 优势：零 JS 依赖、跨浏览器一致、长期兼容、提升无障碍体验；
⚠️ 注意：避免滥用 role="presentation" 或 role="none"，它们可能破坏屏幕阅读器逻辑，仅对纯装饰性内容使用。
⚠️ 次选方案：CSS @media print 回退（谨慎使用）
部分阅读模式（尤其旧版 Edge）会复用打印样式逻辑。虽然非标准，但以下 CSS 可作为轻量级兜底：
/* 在阅读模式中隐藏指定类（效果因浏览器而异） */
@media print {
.hide-in-reader-view,
[aria-hidden="true"] {
display: none !important;
}
}⚠️ 局限性：不可靠——Safari Reader View 不触发 print 媒体查询；aria-hidden="true" 虽能隐藏视觉内容，但可能影响键盘焦点流与屏幕阅读器，仅适用于完全无交互、无语义价值的装饰性节点。
? 补充方案：JavaScript 运行时检测（需权衡风险）
若必须动态控制（例如需保留部分交互式阅读工具），可利用 URL 协议特征做轻量检测。注意：阅读模式通常禁用 JS，但 Safari/Firefox 在进入 Reader View 前仍允许页面 onload 阶段执行脚本：
⚠️ 重要提醒：
- 此方案无法在 Edge 的现代 Immersive Reader 中生效（其运行于独立沙箱环境，不执行页面 JS）；
- location.protocol 在 Safari Reader View 中确为 safari-reader:，但该行为属私有实现，无官方规范保障，未来版本可能变更或移除；
- 建议仅用于渐进增强场景，绝不可作为核心内容可访问性的依赖。
? 总结与最佳实践
| 方案 | 可靠性 | 可维护性 | 推荐度 | 适用场景 |
|---|---|---|---|---|
| 语义化 HTML + ARIA Role | ★★★★★ | ★★★★★ | ⭐⭐⭐⭐⭐ | 所有非正文区域（导航、侧边栏、广告、工具栏） |
| @media print + aria-hidden | ★★☆☆☆ | ★★★☆☆ | ⚠️ 仅备用 | 快速原型或遗留代码临时修复 |
| JS URL 检测 | ★★☆☆☆ | ★★☆☆☆ | ❌ 不推荐为主方案 | 需动态注入阅读模式专属 UI（如字体调节控件）且接受兼容性风险 |
核心原则：让内容“自我描述”——阅读模式不是敌人，而是语义化 Web 的天然盟友。 优先重构 DOM 结构，而非对抗渲染引擎。这不仅解决 Reader View 适配问题，更提升 SEO、无障碍支持与代码长期可维护性。
