如何在我的网站上启用iOS 5 Safari阅读器?
iOS 5中的Mobile Safari的阅读器function如何工作? 如何在我的网站上启用它。 我如何告诉它我的网页上有哪些内容是触发这个function的文章?
这里发布的很多答案都包含虚假信息。 以下是一些更正/澄清:
-
<article>
元素作为包装器正常工作; Safari阅读器识别它。 我的网站是一个例子 。 你select哪个包装元素并不重要,只要有一个,而不是<body>
或<p>
。 您可以使用<article>
,<div>
,<section>
; 或者为了这个目的而在语义上不正确的元素,比如<nav>
,<aside>
,<footer>
,<header>
; 甚至内联元素(如<span>
(!))。 -
阅读器不需要使用标题。 下面是一个文档没有任何
<h*>
元素的Reader工作正常的例子: http : //mathiasbynens.be/demo/safari-reader-test-3
我在这里发布了一些关于我的发现的更多细节: http : //mathiasbynens.be/notes/safari-reader
看来,它所基于的algorithm正在寻找p-Tags,并将“。”这样的分隔符计算在内。 在innerText中。 具有最多点的部分(div)获得焦点。
请参阅: http : //lab.arc90.com/experiments/readability/
似乎是Reader模式的基础,至lessSafari将其归入致谢中,请参阅:
文件:/// C:/Program%20Files/Safari/Safari.resources/Help/Acknowledgments.html
Arc90(可读性)版权所有©Arc90 Inc.
可读性是根据Apache许可证2.0版许可的。
我已经在我的iPhone上testing了100个左右的变体,以便找出触发这个难以捉摸的Reader状态的原因。 我的结论如下:
这是我发现有一个影响:
- 在你想触发“阅读器”的文章中有大约200个或更多的单词(或1000个字符,包括空白)似乎是必要的
- 当我不到170字时,读者从未被触发; 尽pipe有时候我有180或190个单词时就会触发它。
- 某些元素(如
<ol>
或<ul>
(通常不用于包含故事))中的文本不会计入200个字(但是,如果读取器由于其他原因而被触发,它们将显示在阅读器中) - 将200个单词包含在一个块元素(如
<div>
或<article>
似乎是必要的(也就是说,如果有任何网站不是这样的话,我会感到惊讶)
为了充分披露,这里是我发现没有影响:
- 是否使用标题
- 无论是将文本包装在一个
<p>
或让它自由stream动 - 标点符号(即删除所有句号,逗号等等,没有影响)
这个问题( 如何禁用网页中的Safari阅读器 )有更多的细节。 复制在这里:
我很想知道更多关于在Safari中触发Reader选项的内容,以及什么不是。 我不打算执行任何可以禁用它的东西,但是作为一个技术练习是好奇的。
这是我迄今为止学到的一些基本的玩法:
你至less需要一个H标签它不是单独的字符数,而是P标签的数量和长度可能寻找句子'。' 和其他标准Safari将提供“读者”,如果,与H标签,以及:
1 P标签,2417字符4 P标签,1527字符5 P标签,1150字符6 P标签,862字符如果您从上述任何一项中减去1个字符,“读取器”选项不可用。
我应该注意到,H标签的字符数量起到了一部分作用,但是当我确定了上面的结果时,可悲的是没有意识到这一点。 假设H标签有20个以上的字符,并在上面的结果中固定。
其他一些有趣的事情:
P标签的设置将它们从计数设置显示中删除,然后用Javascript显示230ms,避免了Reader选项
如果有人能完全确定,我会很感兴趣。
我正在为此而挣扎。 我终于拿出了我的故事中的标记,中提琴! 它开始工作。
我没有在身体上装任何包装,但可能是偶然的。
HTML5文章标记不会在我的testing中触发它。 它也似乎不适用于离线内容(即保存在本地机器上的页面)。
似乎触发它是一个很多的文字很多的P区块。
p标签理论听起来不错。 我认为它也检测其他元素。 我们的一页6段没有触发读者,但有一个4段和一个img标签做了。
检测多页文章也足够智能。 在nytimes.com或nymag.com上的多页文章中试用。 有兴趣知道它是如何检测的。
令人惊讶的是,它确实没有注意到HTML5的文章标签,尤其令人失望,因为Safari 5完全支持CSS中的文章,部分,导航等等 – 现在它们可以像div一样被devise,和任何块级元素一样。
我已经专门设置了一个文章标签和几个内部部分标签的网站,准备用于语义HTML5标签的确切目的,所以我真的希望Safari 5将使用该阅读器。 没有这样的运气 – 可能应该在这方面提出一个错误,因为这会很有意义。 它实际上完全忽略了页面上的大多数h2级别的小标题,每个都标记为一个小节,只显示符合前述标准的单个div。
具有讽刺意味的是,同一个网站的旧版本,既没有文章,节,也没有分离的div标签,承认整个身体显示在读者。
请参阅文章发布指南 。
以下是关于如何阅读和分析可读性开发者API的API 。 已经有一个项目可以参考: ruby-readability 。
一个简单的历史:Safari浏览器的function,因为苹果公司的Safari 5浏览器embedded了一个名为可读性的代码库,可读性作为一个简单的,基于Javascript的阅读工具,将任何网页变成一个可定制的阅读视图。 它于2009 年初在纽约市的devise和技术商店Arc90 (作为Arc90 Lab实验)发布。它还embedded在亚马逊Kindle和stream行的iPad应用程序,如Flipboard和Reeder中。
我正在从类似于Safari Readerfunction的信息“垃圾”中清除网站的algorithm。 这不是可读性好,但有一些很酷的东西。
您可以在smartbrowser.codeplex.com项目页面了解更多信息。