【发布时间】:2017-12-14 21:55:35
【问题描述】:
如何利用浏览器中的阅读器模式来呈现网页的简化版本?
我使用 Google 查找有关如何对页面进行编码或以其他方式设置为阅读器模式的信息,但我没有找到任何信息。是否有说明阅读器模式以及如何设置可以利用它的页面的文档或网页?
【问题讨论】:
-
这个链接可能对一些有帮助...forums.mozillazine.org/viewtopic.php?f=7&t=2935631
如何利用浏览器中的阅读器模式来呈现网页的简化版本?
我使用 Google 查找有关如何对页面进行编码或以其他方式设置为阅读器模式的信息,但我没有找到任何信息。是否有说明阅读器模式以及如何设置可以利用它的页面的文档或网页?
【问题讨论】:
阅读模式的工作方式没有标准,而且它的工作方式因浏览器而异。您可以通过遵守文档标题的约定并提供某些元数据元素来帮助确保阅读模式与您的网站很好地配合。我已经详细记录了这一点here。
【讨论】:
理论上:什么都不做。
网站作者通常不喜欢阅读器模式 - 它隐藏了他们的广告,并抛弃了设计。它旨在不受站点影响而工作,并且不需要特定的工作。
也就是说,当提供高质量、结构良好的标记时,它更有可能运作良好。
编写有效的 HTML。利用<main>、<nav>、<header>、<footer>、<h1-6>等语义元素。
【讨论】:
你读过这个吗? https://mathiasbynens.be/notes/safari-reader 以下是直接取自网站的结论说明
结论
这肯定需要更多调查,但到目前为止,这些似乎 是 Safari 阅读器功能最重要的因素 开始:
使用正确的标记,即确保最重要的内容包含在容器元素中。无论您使用文章、div 还是 span 似乎无关紧要——只要不是 p。 内容需要足够长。使用足够的单词,使用足够的段落,使用足够的标点符号。每个段落至少应包含 100 个字符。
阅读器不适用于本地文档。
【讨论】:
我认为最重要的不仅是使用有效的 HTML,而是使用 HTML5 以及它提供的所有东西来在语义上构建文本:<section> 具有清晰分离的部分,<article> 如果你有主题独立的部分(比如不同的博客文章/文章),<header> 清楚地标记标题部分,<h1> 到 <h6> 用于分层不同的标题(你应该始终小心不要省略一个级别,即例如没有在h2部分直接有一个h4,总是使用nav作为导航菜单等,段落,列表,页脚等等......
顺便说一句:<div>s 没有任何语义含义,因此您可以使用这些(连同类属性)来做任何事情,以在视觉上调整“非读取模式”的结果。
【讨论】: