Kindle Fire Silk 浏览器阅读视图 CSS答案

【问题标题】：Kindle Fire SilkBrowser Reading View CSSKindle Fire Silk 浏览器阅读视图 CSS
【发布时间】：2012-04-30 07:11:19
【问题描述】：

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

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

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

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

【问题讨论】：

我已经直接联系了亚马逊……我所做的一切似乎都是一贯的
甚至没有新的hidden html5 属性？
@deathApril 我还没有检查隐藏属性...我会做更多测试

标签： html css mobile-website kindle-fire amazon-silk

【解决方案1】：

我在 Kindle Fire Silk 浏览器上没有这方面的经验，但是我知道 iPhone 具有基于语义 HTML 而不是 CSS 的阅读器功能。如果您使用像

这样的语义布局

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

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

【讨论】：

【解决方案2】：

一个快速而肮脏的解决方案是添加不应由读者通过 javascript 或 jQuery

显示（或说出）的元素

【讨论】：

这就是我所采用的方法。如果有一些文档要遵循，我会很好

【解决方案3】：

尝试使用媒体查询，kindle 可能看起来像网站的打印版本，所以如果您为打印和标准屏幕创建媒体查询，那么它可能会起作用。

【讨论】：

截至 2013 年 1 月 21 日，媒体查询的成功参差不齐...我可以为 Kindle Fire 的阅读视图“修复”我的网站，但有时它仍会显示错误的 <div>