Kindle Fire Silk 浏览器阅读视图 CSS
Posted
技术标签:
【中文标题】Kindle Fire Silk 浏览器阅读视图 CSS【英文标题】：Kindle Fire SilkBrowser Reading View 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 我还没有检查隐藏属性...我会做更多测试 【参考方案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>以上是关于Kindle Fire Silk 浏览器阅读视图 CSS的主要内容，如果未能解决你的问题，请参考以下文章