本文介绍在 safari 和 microsoft edge 阅读模式下隐藏非必要 ui 元素的可靠方法，优先推荐语义化 html 与 aria 角色方案，并补充兼容性 js/css 副方案及使用注意事项。
浏览器的阅读模式（如 Safari 的“阅读器视图”、Edge 的“沉浸式阅读器”）旨在提取网页核心内容，剥离干扰性 UI（如广告、导航栏、侧边栏等），为用户提供专注、简洁的阅读体验。然而，其自动识别逻辑并非万能——部分自定义组件或非标准结构可能被错误保留。此时，开发者需要主动干预，确保关键装饰性、交互性元素在阅读模式中被合理隐藏。
✅ 首选方案：语义化标记与 ARIA 角色（无 JS、跨浏览器、未来安全）
阅读模式引擎（包括 Safari、Edge、Firefox）均基于 HTML 语义和可访问性属性进行内容筛选。因此，最健壮、无需 JavaScript、且符合 Web 标准的方案是使用语义化标签与恰当的 role 属性：
-
避免渲染的语义容器（阅读器通常跳过）：
<aside class="advertisement">广告位</aside> <nav class="main-navigation">主导航</nav> <footer class="site-footer">页脚信息</footer> <dialog class="modal-overlay">模态弹窗</dialog>
-
显式声明非主要内容角色：
<div role="navigation" aria-label="主菜单">...</div> <div role="complementary" aria-label="相关文章推荐">...</div> <div role="banner" aria-label="网站头部横幅">...</div>
✅ 优势：无需检测浏览器、不依赖 URL 协议变更、不触发 JS 执行（阅读模式常禁用脚本）、长期兼容性强。
⚠️ 注意：role="application" 或 role="presentation" 不推荐用于此场景——前者可能完全破坏可访问性，后者需谨慎配合 aria-hidden 使用。
⚠️ 次选方案：CSS 媒体查询与属性控制（有限适用）
若语义重构不可行，可尝试以下辅助手段，但须知其局限性：
-
@media print 回退策略（部分阅读器复用打印样式）：
@media print { .skip-in-reader, [aria-hidden="true"] { display: none !important; } }✅ 简单、零 JS；❌ 并非所有阅读器都继承 print 媒体查询（Edge 新版已弱化该行为），且可能意外影响真实打印输出。
-
aria-hidden="true" 属性（强制声明不可见）：
<div class="widget-sidebar" aria-hidden="true">实时聊天窗口</div>
✅ 被主流阅读器识别；❌ 若该区域含重要交互或焦点管理，可能损害键盘/屏幕阅读器用户访问性，慎用于功能型组件。
?️ 实验性方案：JS 检测 + 动态类注入（仅作降级补充）
当必须依赖运行时判断时，可利用阅读模式特有的 URL 协议特征（注意：仅在页面加载初期有效，且 Safari/Firefox 支持更稳定，Edge 已逐步弃用 read: 协议）：
<script>
document.addEventListener('DOMContentLoaded', () => {
const isReaderMode =
location.protocol === 'safari-reader:' || // Safari
location.href.startsWith('about:reader?url=') || // Firefox
location.href.startsWith('edge://read/'); // Edge（旧版，已不推荐）
if (isReaderMode) {
document.body.classList.add('in-reader-view');
}
});
</script>
<style>
body.in-reader-view .hide-in-reader-view,
body.in-reader-view [data-reader-hide] {
display: none !important;
}
</style>⚠️ 重要警告：
- 此方案不可靠：Edge 已移除 read: 协议，现代版本使用 edge://read/ 或内部机制，且 JS 在多数阅读模式中默认被禁用或延迟执行；
- Safari Reader 的 safari-reader: 协议仅在特定加载路径下可见，且无法通过 window.location 在所有上下文中安全读取；
- 切勿将此作为主要逻辑，仅建议用于非关键视觉降级（如隐藏次要图标、微调字体大小），并始终提供语义化兜底。
✅ 最佳实践总结
| 方案 | 可靠性 | 可访问性 | 维护成本 | 推荐指数 |
|---|---|---|---|---|
| 语义化标签（<aside>/<nav>）+ ARIA role | ★★★★★ | ★★★★★ | 低 | ⭐⭐⭐⭐⭐ |
| aria-hidden="true"（静态装饰区） | ★★★★☆ | ★★☆☆☆（误用风险高） | 低 | ⭐⭐⭐☆☆ |
| @media print 隐藏 | ★★☆☆☆ | ★★★☆☆ | 极低 | ⭐⭐☆☆☆ |
| JS 检测 URL 协议 | ★☆☆☆☆ | ★★★☆☆ | 中高（需持续适配） | ⭐☆☆☆☆ |
终极建议：从设计源头分离「内容」与「界面」——将导航、广告、工具栏等明确标记为非主要内容。这不仅提升阅读模式体验，更增强 SEO、可访问性（a11y）与响应式鲁棒性。技术债越少，未来兼容性越稳。
