【问题标题】:How do you create a web page for reader mode?您如何为阅读器模式创建网页?
【发布时间】:2017-12-14 21:55:35
【问题描述】:

如何利用浏览器中的阅读器模式来呈现网页的简化版本?

我使用 Google 查找有关如何对页面进行编码或以其他方式设置为阅读器模式的信息,但我没有找到任何信息。是否有说明阅读器模式以及如何设置可以利用它的页面的文档或网页?

【问题讨论】:

标签: html css


【解决方案1】:

阅读模式的工作方式没有标准,而且它的工作方式因浏览器而异。您可以通过遵守文档标题的约定并提供某些元数据元素来帮助确保阅读模式与您的网站很好地配合。我已经详细记录了这一点here

【讨论】:

    【解决方案2】:

    理论上:什么都不做。

    网站作者通常不喜欢阅读器模式 - 它隐藏了他们的广告,并抛弃了设计。它旨在不受站点影响而工作,并且不需要特定的工作。

    也就是说,当提供高质量、结构良好的标记时,它更有可能运作良好。

    编写有效的 HTML。利用<main><nav><header><footer><h1-6>等语义元素。

    【讨论】:

    • 我理解一些作者可能有的抱怨,但我希望能够设计一些在阅读模式下运行良好的页面。但是,考虑到一些作者不想要它 - 有没有办法在页面上禁用阅读模式?至于有效的 HTML - 好点。如果作者使用“有效”的 HTML 结构设计和格式化他们的页面,无论阅读模式如何,页面都会更好地“工作”并显示得更好。
    【解决方案3】:

    你读过这个吗? https://mathiasbynens.be/notes/safari-reader 以下是直接取自网站的结论说明

    结论

    这肯定需要更多调查,但到目前为止,这些似乎 是 Safari 阅读器功能最重要的因素 开始:

    使用正确的标记,即确保最重要的内容包含在容器元素中。无论您使用文章、div 还是 span 似乎无关紧要——只要不是 p。 内容需要足够长。使用足够的单词,使用足够的段落,使用足够的标点符号。每个段落至少应包含 100 个字符。

    阅读器不适用于本地文档。

    【讨论】:

      【解决方案4】:

      我认为最重要的不仅是使用有效的 HTML,而是使用 HTML5 以及它提供的所有东西来在语义上构建文本:<section> 具有清晰分离的部分,<article> 如果你有主题独立的部分(比如不同的博客文章/文章),<header> 清楚地标记标题部分,<h1><h6> 用于分层不同的标题(你应该始终小心不要省略一个级别,即例如没有h2部分直接有一个h4,总是使用nav作为导航菜单等,段落,列表,页脚等等......

      顺便说一句:<div>s 没有任何语义含义,因此您可以使用这些(连同类属性)来做任何事情,以在视觉上调整“非读取模式”的结果。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2022-10-19
        • 1970-01-01
        • 2011-10-27
        • 2013-02-25
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多