优化网站以在 Firefox 中显示阅读器视图答案

【问题标题】：Optimize website to show reader view in Firefox优化网站以在 Firefox 中显示阅读器视图
【发布时间】：2015-08-24 04:02:18
【问题描述】：

Firefox 38.0.5 在地址栏中添加了“阅读器视图”：

但并非所有网站都有此图标，它仅在检测到可读内容页面时出现。那么如何为我的网站启用此功能？

我尝试了媒体打印和打印视图的额外样式表，但没有效果：

<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>

我必须将什么代码 sn-ps 添加到我的网站源代码中，以便我网站的访问者可以看到这个书本图标？

【问题讨论】：

How Does Firefox Reader View Operate (FF version 38.0.5) 的可能重复项

标签： firefox firefox-reader-view

【解决方案1】：

正如May '20 中的代码所示，触发函数 (isProbablyReaderable) 仅对包含至少一个死者 br 的 p 或 pre 元素和 div 元素进行评分。

评分启发式的稍微过分简化的是：

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

【讨论】：

基于此，我创建了一个小 js 片段，表明我远远超过了这个限制。但 Firefox 没有显示阅读器模式图标。
@iRaS 页面是在文件系统中还是托管的？找到原因了吗？
@surfmuggle 是的，这就是原因：该按钮仅对通过 http 请求的页面有效。

【解决方案2】：

你必须添加<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>

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

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

Here are some more details about the mechanism

【讨论】：

这仍然适用吗？我试过了，它不会触发 Firefox ReaderView 选项。还有其他标准吗？就像页面不是本地的一样？
@FanaticD 如果本地是指file:/// URL，则正确。即使在兼容的 HTML 上，也不提供阅读器模式来浏览文件。
请注意，file:/// 排除项最初是“出于安全原因”（与担心链接about:reader?url=file:/// URL 以进行恶意行为的网站有关），现在已经通过其他方式解决了这个问题消息是 Mozilla 团队“愿意重新审视”file:/// URL 问题。但那是一年多以前的事了，还没有重访。 bugzilla.mozilla.org/show_bug.cgi?id=1166829