在 iOS 5 版本中，Mobile Safari 的 Reader 功能是如何工作的？我该如何在我的网站上启用它？我如何告诉它我的页面内容是一篇文章，以触发这个功能？
（注意：已经翻译成中文并保留了HTML标签。）如何在我的网站上启用iOS 5 Safari阅读器？
77
- bshack
1
请参阅 https://dev59.com/JV0a5IYBdhLWcg3wFlRG 了解有关 Firefox 中 Reader View 的一些信息。 - handle
11个回答
69
很多在这里发布的答案包含错误信息。以下是一些纠正/澄清：
使用
<article>元素作为包装器没有问题；Safari Reader 可以识别它。 我的网站就是一个例子。只要选择了一个除了<body>或<p>之外的包装元素，您可以使用<article>、<div>、<section>或语义不正确的元素如<nav>、<aside>、<footer>、<header>，甚至是内联元素如<span>！Safari Reader 不需要标题即可工作。以下是一个没有任何
<h*>元素的文档示例，Safari Reader 可以正常工作：http://mathiasbynens.be/demo/safari-reader-test-3
关于我的发现，我在这里发布了更多详细信息：http://mathiasbynens.be/notes/safari-reader
- Mathias Bynens
8
我在我的iPhone上测试了约100种不同的方式，以找出触发这个难以捉摸的“阅读器”状态的方法。我的结论如下：
以下是我发现对此有影响的因素：
- 在您想要触发“阅读器”的文章中拥有大约200个或更多单词（或包括空格在内的1000个字符）似乎是必要的。 - 当我有少于170个单词时，“阅读器”从未被触发；尽管有时当我有180或190个单词时，它会被触发。 - 某些元素（例如
以下是我发现对此有影响的因素：
- 在您想要触发“阅读器”的文章中拥有大约200个或更多单词（或包括空格在内的1000个字符）似乎是必要的。 - 当我有少于170个单词时，“阅读器”从未被触发；尽管有时当我有180或190个单词时，它会被触发。 - 某些元素（例如
- 或
- ），它们不通常用于包含故事的文本不会计入200个字数（但如果由于其他原因触发了“阅读器”，它们将显示在“阅读器”中）
- 将200个单词包裹在块级元素（例如
或）中似乎是必要的（话虽如此，如果没有任何网站已经这样做，我会感到惊讶）
完全透明地说，以下内容并没有影响：
- 使用标题与否 - 是使用
完全透明地说，以下内容并没有影响：
- 使用标题与否 - 是使用
标签还是让文本自由流动 - 标点符号（即删除所有句号、逗号等并没有影响）
- eriklinde
7
似乎该算法是基于查找p标签和计算innerText中"."这样的分隔符。得分最高的部分（div）将获得焦点。
易读性受 Apache License，Version 2.0许可。
see: http://lab.arc90.com/experiments/readability/
这似乎是阅读模式的基础，至少Safari在致谢中将其归属为此，见：
Arc90（易读性） 版权所有 © Arc90 Inc.file:///C:/Program%20Files/Safari/Safari.resources/Help/Acknowledgments.html
易读性受 Apache License，Version 2.0许可。
- tantran
3
这个问题(如何在网页中禁用Safari Reader)有更多细节。以下是复制的内容：
我想了解更多关于什么会触发Safari中的Reader选项，以及什么不会。我不打算实现任何禁用它的东西，但是作为技术练习而好奇。
这是我到目前为止通过一些基本操作学到的知识：
您至少需要一个H标签 它不仅仅按字符计数，还按P标签和长度的数量计数 可能会寻找句子分隔符“。”和其他标准 如果使用H标签，并且满足以下条件，Safari将提供'Reader'：
1个P标记，2417个字符 4个P标记，1527个字符 5个P标记，1150个字符 6个P标记，862个字符 如果从上述任何一个中减去1个字符，则不会出现'Reader'选项。
我应该注意到，H标签的字符计数也起着一定作用，但遗憾的是当我确定上述结果时没有意识到这一点。假设H标签的字符数为20+，并在上述结果中保持不变。
一些其他有趣的事情：
对于P标记设置
display:none将其从计数中移除 将显示设置为none，然后使用Javascript在230ms后再次显示它们也可以避免Reader选项如果有人能完全确定这一点，我会很感兴趣。
- yrn1
1
2错误。标题元素不是阅读器工作所必需的。示例：http://mathiasbynens.be/demo/safari-reader-test-3 在此处阅读更多内容：http://mathiasbynens.be/notes/safari-reader - Mathias Bynens
2
- Smartmarkey
2
我曾经为此苦苦挣扎。最后，我删除了故事中的<ul>标记，然后就奇迹般地开始工作了。
我没有在周围放置任何包装器，但可能是意外操作导致了这种情况。
- dan
1
虽然令人惊讶，但它确实没有关注HTML5文章标签，这特别令人失望，因为Safari 5在CSS中完全支持article、section、nav等——它们现在可以像div一样进行样式设置，并且与任何块级元素的行为相同。
我专门设置了一个带有文章标签和几个内部section标签的站点，为了准备语义化HTML5标记，以便实现这样的目的，所以我真的希望Safari 5会将其用于Reader。但没有这样的运气——可能应该在此提出错误报告，因为这将非常有意义。事实上，它完全忽略了页面上大多数h2级子标题，每个都标记为一个section，只显示符合先前提到的标准的单个div。
具有讽刺意味的是，旧版本的同一站点既没有article、section，也没有分隔的div标签，却能识别整个正文以在Reader中显示。
- Marc
2
<article>是Safari Reader识别的有效包装器，它可以正常工作。请参阅我的评论以获取一些示例：https://dev59.com/GXA75IYBdhLWcg3w_ef1#2999102 - Mathias Bynens1我可能没有表达清楚；我的意思是，<article> 标签与普通的 <div> 标签没有任何区别；我希望如果 Reader 看到一个 <article> 标签，它会将内容视为一个块，但除非内容符合其其他要求，否则它不会这样做。对我来说，问题在于我的 <article> 包含多个 <section> 和 <div>，而 Reader 只抓取了一个包含的 <section>。 - Marc
1
HTML5的文章标签在我的测试中没有触发它。它似乎也无法在离线内容上工作（即保存在本地机器上的页面）。
似乎可以触发它的是一个带有许多文本的p的div块。
- yrn1
2
我在我的网站上使用
<article>，并且阅读器可以正常工作，例如http://mathiasbynens.be/notes/html5-levels，但是在较小的文章中，例如http://mathiasbynens.be/notes/document-head，阅读器无法正常工作。使用`<article>`似乎与此无关。 - Mathias Bynens1任何包装元素都可以 -
<div>，<article>，<section>...甚至像<nav>，<aside>或<span>这样的奇怪元素也可以正常工作。在此处阅读更多信息：http://mathiasbynens.be/notes/safari-reader - Mathias Bynens1
p标签的理论听起来不错。我认为它也可以检测其他元素。我们有一个有6段落的页面没有触发阅读器，但是一个有4段落和一个img标签的页面却触发了。
它还足够聪明，可以检测多页文章。在nytimes.com或nymag.com上尝试一下多页文章。也很想知道它如何检测到这一点。
- user139195
1
请参阅文章发布指南。
以下是关于如何阅读和解析的API：Readability开发者API。已经有一个项目可以供您参考：ruby-readability。
简要历史： 自从苹果的Safari 5浏览器推出Safari Reader功能以来，嵌入了一个名为Readability的代码库，而Readability最初是一个基于JavaScript的简单阅读工具，可以将任何网页转换为可定制的阅读视图。它由纽约市的设计和技术公司Arc90（作为Arc90实验室实验）在2009年初发布。它也被嵌入到Amazon Kindle和流行的iPad应用程序中，如Flipboard和Reeder。
- Allen
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接