优化网站以在Firefox中显示读者视图

Question

优化网站以在Firefox中显示读者视图

rub*_*o77 25 firefox firefox-reader-view

Firefox 38.0.5在地址栏中添加了"Reader View":

在此输入图像描述

但并非所有网站都会显示此图标,只有在检测到可读内容页面时才会显示.那么如何为我的网站启用此功能呢？

我尝试了介质打印和打印视图的额外样式表,但这没有效果:

<html>
<head>
<style>
  @media print { /* no effect: */
    .no-print { display:none; }
  }
</style>
<!-- no effect either:
<link rel="stylesheet" href="print.css" media="print"><!--  -->
</head><body>
<h1>Some Title</h1>
<img class="no-print" src="http://dummyimage.com/1024x100/000/ffffff&text=This+banner+should+vanish+in+print+view">
<br><br><br>This is the only text
</body></html>

Run Code Online (Sandbox Code Playgroud)

我必须将哪些代码段添加到我的网站源代码中,以便我的网站访问者可以看到此图标图标？

Answer 1

aho*_*aus 13

由于代码代表于17年11月,触发器函数(isProbablyReaderable)仅得分p或包含至少一个死者的pre元素和div元素br.

评分启发式的略微过度简化是:

对于['p','pre','div> br']中的每个元素:
- 如果textContent长度为> 140个字符,增加score由sqrt(length - 140)
如果累计score> 20,则返回true

Answer 2

rub*_*o77 12

您必须添加<div>或<p>标记以实现一个页面来启动ReaderView.

我创建了一个有效的简单html:

<html><head>
<title>Reader View shows only the browser in reader view</title>
</head>
<body>
Everything outside the main div tag vanishes in Reader View<br>
<img class="no-print" src="http://dummyimage.com/1024x100/000/ffffff&text=This+banner+should+vanish+in+print+view">
<div>
   <h1>H1 tags outside ot a p tag are hidden in reader view</h1>
   <img class="no-print" src="http://dummyimage.com/1024x100/000/ffffff&text=This+banner+is resized+in+print+view">
   <p>
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789 123456
</p>
</div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

这是激活它所需的最低要求.这是一个多方面的过程,为文本块添加分数.

例如,如果<p>在视图帖子模板中的每个消息块周围添加-tag,则可以激活论坛软件中的阅读器视图.

以下是有关该机制的更多详细信息

@FanaticD如果在本地你的意思是`file:///`URL,正确.即使在兼容的HTML上,也不提供读者模式进行文件浏览. (2认同)
请注意，排除 `file:///` 最初是“出于安全原因”（与网站链接 `about:reader?url=file:///` URL 以进行恶意操作有关），现在就是这样以其他方式解决的最后一句话是 Mozilla 团队“愿意重新访问”`file:///` URL 问题。但那是一年多前的事了，还没有发生过重访。https://bugzilla.mozilla.org/show_bug.cgi?id=1166829 (2认同)

归档时间：	10 年，6 月前
查看次数：	15290 次
最近记录：	8 年前