Html 如何在网页中禁用 Safari 阅读器

How to disable Safari Reader in a web page

提问by donohoe

I'm curious to know more about what triggers the Reader option in Safari and what does not. I wouldn't plan to implement anything that would disable it, but curious as a technical exercise.

我很想知道更多关于什么会触发 Safari 中的“阅读器”选项，什么不会。我不打算实施任何会禁用它的东西，但作为技术练习很好奇。

Here is what I've learned so far with some basic playing around:

以下是我到目前为止所学到的一些基本知识：

• You need at least one Htag
• It does not go by character count alone but by the number of P tags and length
• Probably looks for sentence breaks '.' and other criteria

• 您至少需要一个H标签
• 它不仅仅通过字符数，而是通过 P 标签的数量和长度
• 可能会寻找断句 '.' 和其他标准

Safari will provide the 'Reader' if, with a Htag, and the following:

如果带有H标签和以下内容，Safari 将提供“阅读器” ：

• 1 Ptag, 2417 chars
• 4 Ptags, 1527 chars
• 5 Ptags, 1150 chars
• 6 Ptags, 862 chars

• 1 个P标签，2417 个字符
• 4 个P标签，1527 个字符
• 5 个P标签，1150 个字符
• 6 个P标签，862 个字符

If you subtract 1 character from any of the above, the 'Reader' option is not available.

如果从上述任何一项中减去 1 个字符，则“阅读器”选项不可用。

I should note that the character count of the Htag plays a part but sadly did not realize this when I determined the results above. Assume 20+ characters for Htag and fixed throughout the results above.

我应该注意到H标签的字符数起到了一定的作用，但遗憾的是，当我确定上述结果时并没有意识到这一点。假设H标签有20 多个字符，并在上述结果中进行了修正。

Some other interesting things:

其他一些有趣的事情：

• Setting <p style="display:none;">for Ptags removes them from the count
• Setting displayto none, and then showing them 230ms later with Javascript avoided the Reader option too

• 设置<p style="display:none;">为P标签从计数删除它们
• 设置display为none，然后在 230 毫秒后使用 Javascript 显示它们也避免了 Reader 选项

I'd be interested if anyone can determine this in full.

如果有人能完全确定这一点，我会很感兴趣。

采纳答案by Mathias Bynens

“You need at least one <h*>element” — this is simply incorrect. Here's an example: http://mathiasbynens.be/demo/safari-reader-test-3

“你至少需要一个<h*>元素”——这完全是错误的。这是一个例子：http: //mathiasbynens.be/demo/safari-reader-test-3

My answer on the other Safari Reader questionprovides some more info.

我对另一个 Safari 阅读器问题的回答提供了更多信息。

You could also read my blog post on enabling Safari Readerfor all my findings on the subject.

您还可以阅读我关于启用 Safari 阅读器的博客文章，了解我在该主题上的所有发现。

回答by webdevkit

Adding markup to potentially "readable" tags, like pand div, can cause the Readability algorithm to ignore the tag, thus lowering the score, hopefully to a point that it doesn't trigger the Reader icon to display.

将标记添加到潜在的“可读”标签，例如p和div，可能会导致可读性算法忽略该标签，从而降低分数，希望达到不会触发阅读器图标显示的程度。

Looking at the Readability source, one area to do this is in the idand classattributes, as it does pattern matching on the combined data from these two attributes. For example, adding a "comment" class, like so

查看 Readability 源代码，其中一个区域是在id和class属性中，因为它对来自这两个属性的组合数据进行模式匹配。例如，添加一个“评论”类，像这样

<p class="myClass comment">...</p>

will cause that element to be ignored. The pattern that is being matched for "unlikely" candidates is:

将导致该元素被忽略。与“不太可能”候选人匹配的模式是：

/combx|comment|disqus|foot|header|menu|rss|shoutbox|sidebar|sponsor/i

Placing flags on the elements that might add to the Readability Score can allow you to disable the Reader icon.

在可能会增加可读性分数的元素上放置标志可以让您禁用阅读器图标。

回答by Vincent Flanders

See http://code.google.com/p/arc90labs-readability/source/browse/trunk/js/readability.jsfor "the code" for readability.

有关可读性的“代码”，请参阅http://code.google.com/p/arc90labs-readability/source/browse/trunk/js/readability.js。

回答by pb.

According to The Register, Safari Reader is based on the open source project Readability. You might be able to look through the codefor clues.

据The Register报道，Safari Reader 基于开源项目Readability。您或许可以查看代码以寻找线索。

回答by willem

Check out this post: How to Block Safari 5's New Reader (And Bite Off Your Nose)

查看这篇文章：如何阻止 Safari 5 的新阅读器（并咬掉你的鼻子）

回答by user984003

Here is what worked for me:

这是对我有用的：

I placed all content inside an ol tag.

我将所有内容放在一个 ol 标签中。

<ol style = "padding:0;margin:0"> 
   my content
</ol>

From what I read elsewhere, the reader is partly triggered by the number of words on a page, but it does not count words inside an ol.

从我在别处读到的内容来看，读者部分是由页面上的字数触发的，但它不计算 ol 中的字数。

回答by user10068278

I got it to work by getting rid of the <p>tags, changing them to <div>tags.

我通过摆脱<p>标签，将它们更改为<div>标签来使其工作。

I think the <p>tags tell the browser that there is some text there to be read.

我认为<p>标签告诉浏览器有一些文本可供阅读。

I left the <h>tags and they, on their own, did not bring up the reader.

我留下了<h>标签，他们自己没有提到阅读器。

回答by abelito

I had a div inside my that wrapped all my content.. Changing this div to be a element, and adding a class to remove all padding that is created by the , removed the reader button on my mobile site.

我的里面有一个 div，它包装了我的所有内容.. 将此 div 更改为一个元素，并添加一个类以删除由 . 创建的所有填充，删除了我的移动网站上的阅读器按钮。

回答by Andrea Moro

It looks like a quite complex algo the one adopted by Safari reader. I guess something more simple sticks behind this. Most probably a well W3C document with some SEO best practice like the one you mentioned.

Safari 阅读器采用的算法看起来非常复杂。我想这背后有一些更简单的东西。很可能是一个很好的 W3C 文档，其中包含您提到的一些 SEO 最佳实践。

I believe something like this:

我相信这样的事情：

1. At least an H1
2. <p>tags open and closed, and properly following each heading tags
3. a general containing layer

1. 至少H1
2. <p>标签打开和关闭，并正确跟随每个标题标签
3. 一般包含层

Most probably the reader is looking for something close to the new HTML 5specific, so a class caller article or something like that.

很可能读者正在寻找接近于新的HTML 5特定的东西，因此类调用者文章或类似的东西。

It's interesting to understand why Apple didn't disclose anything about this.

有趣的是，Apple 没有透露任何相关信息。