如何在网页上禁用Safari阅读器

问题描述 投票:34回答:9

我很好奇,想知道是什么触发了Safari中的Reader选项,而哪些却没有。我不打算实施任何会禁用它的方法,但作为技术练习却对此感到好奇。

这是到目前为止我通过一些基本的学习中学到的东西:

  • 您至少需要一个H标签
  • 它不单靠字符计数,而是按P标签的数量和长度
  • [可能要寻找句号'。和其他条件

如果具有H标记以及以下内容,Safari将提供“阅读器”:

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

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

我应该注意,H标记的字符计数起了一定作用,但是当我确定上述结果时,可惜没有意识到这一点。假设H标签使用20个以上的字符,并且在以上结果中均已固定。

其他一些有趣的事情:

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

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

html safari
9个回答
8
投票

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

My answer on the other Safari Reader question提供了更多信息。

您也可以阅读my blog post on enabling Safari Reader以获取我在该主题上的所有发现。


11
投票

pdiv之类的潜在“可读”标签添加标记可能会导致Readability算法忽略该标签,从而降低评分,以至于它不会触发Reader图标显示。

查看可读性源,在idclass属性中需要执行此操作,因为它会对来自这两个属性的组合数据进行模式匹配。例如,添加“ comment”类,就像这样

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

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

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

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


2
投票

2
投票

这是对我有用的东西:

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

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

[根据我在其他地方阅读的内容,读者在某种程度上是由页面上的单词数触发的,但它不计算ol中的单词数。


1
投票

根据The Register,Safari Reader基于开源项目Readability。您可能可以通过the code查找线索。



0
投票

Safari浏览器采用的算法似乎很复杂。我猜这背后有更简单的东西。可能是一份不错的W3C文档,其中包含您提到的SEO最佳实践。

我相信这样:

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

[最有可能的读者是在寻找与新的HTML 5特定的内容接近的东西,因此是类调用者文章或类似的东西。

很有趣,为什么苹果公司没有对此透露任何信息。


0
投票

我内部有一个div,它包装了我所有的内容。将这个div更改为元素,并添加一个类以删除所创建的所有填充,从而删除了我的移动网站上的阅读器按钮。


0
投票

我摆脱了<p>标签,将它们更改为<div>标签,使其正常工作。

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

我离开了<h>标签,但它们本身并没有引起阅读器的注意。

© www.soinside.com 2019 - 2024. All rights reserved.