logo标签列表

Kindle Fire Silk浏览器阅读视图CSS

htmlcssmobile-websitekindle-fireamazon-silk
15

有人知道如何正确地为 Kindle Fire Silk 浏览器的阅读视图实现 CSS 类吗？

Kindle Fire 6.3 更新添加了“阅读视图”：

在 Silk 的阅读视图中，您感兴趣的内容将优先显示在一个经过阅读优化的单屏视图中（即使是多页文章）。完整页面仍在后台可用，您可以轻松切换回传统视图以查看页面上的其他有趣功能。

我检查了自己的网站，它将一个<div style="display:none;">呈现为阅读视图文章，并且我一直没有找到如何将 Silk 浏览器指向应该在阅读视图中显示的部分的详细信息。

代码示例：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en" xml:lang="en">

<head>
  <title>Title</title>
</head>

<body>

<div id='content'>
  //important article here
</div>

<div id='sidebar'>
   //less important menu here
</div>

<div style='display:none;'>
   //lightbox HTML here, not important on mobile devices
</div>

</body>

</html>

如果我找到任何文档，我会进行更新。

我已经直接联系了亚马逊... 无论我做什么，似乎都没有一致的作用。 - taylorjes
连新的 hidden HTML5 属性也没有吗？ - Aprillion
@deathApril 我还没有检查过隐藏属性...我会进行更多的测试。 - taylorjes
3个回答
1

我对Kindle Fire Silk浏览器没有任何经验，但是我知道iPhone的阅读器功能基于语义化HTML而不是CSS。如果您使用语义化布局，例如

<h1>header</h1>
<h2>some text</h2>
<p>a paragraph</p>

然后，阅读器功能将适当地显示此内容。还要注意的是，CSS样式被禁用，视觉布局改为针对设备的标准，旨在提高可读性。我不确定您是否可以直接影响此视图的样式，除非在操作系统中进行硬编码。

0
尝试使用媒体查询，可能是因为Kindle看起来像网站的打印版本，所以如果你为打印和标准屏幕创建一个媒体查询，那么它可能会起作用。
截至2013年1月21日，媒体查询的成功率并不是很高...我可以为Kindle Fire的阅读视图“修复”我的站点，但有时它仍会显示错误的<div>。 - taylorjes
0
一个快速而不太优雅的解决方案是通过JavaScript或jQuery添加不应该被读者显示（或朗读）的元素。
这就是我所采取的措施。如果有一些文档可以遵循，那就太好了。 - taylorjes
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接