我想创建一个响应,移动优化的阅读体验类似于epub/ebook阅读器,如Kindle应用程序,或iBooks,使用动态HTML作为源.
想象一篇长篇文章或博客文章,需要大量垂直滚动才能阅读,特别是在小型移动设备上.我想要做的是将长页面分成多个全屏幕部分,允许用户使用左/右导航箭头和/或滑动手势来"翻阅"整篇文章.
有许多可用的JS库可以创建预定义幻灯片的"幻灯片放映"或"转盘"(使用div或其他容器元素).但是我希望文本和html内容能够动态地重新流动以适应任何设备视口并且仍然可读...就像一个epub/ebook用户界面,如Kindle应用程序或iBooks.因此,对于同一篇文章,手机上会有比平板电脑或桌面视口更多的"页面",如果/当视口大小发生变化时,需要动态创建/调整这些"页面"(比如在移动设备上从纵向切换到横向).
以下是javascript .epub阅读器的示例:epub.js
...注意响应行为.调整视口大小时,所有文本都会重新流动以适应可用空间,增加或减少"页面"的总数.问题是epub.js需要.epub文件作为其源.
我想要的是html页面的相同用户界面和功能.
我搜索并搜索了某种可以开箱即用的库,但却找不到任何东西.
我意识到我可以使用转换脚本将我的html页面转换为.epub文件,然后使用epub.js在浏览器中呈现该文件,但这看起来非常圆润且笨重.使用html作为直接来源,渲染/模仿客户端响应电子书用户体验,模仿或模拟.epub读者用户体验会好得多.
有谁知道这样的事情是否已经存在,或者我怎么能自己建造它？
关键功能是动态/响应式文本重排.当视口尺寸减小时,文本/内容需要回流到下一个"页面"以避免任何垂直滚动的需要.我不知道如何有效地做到这一点.如果我自己编写代码,我可能会使用类似jQuery Columnize插件的东西,将所有列设置为width: 100vw; height: 100vh,以便每列都像一个"页面",然后找出如何在这些"页面"之间创建一个滑动UI.
任何帮助深表感谢!