一句js将博客园文章转成手机/kindle易于阅读样式
2014-10-27 10:53
405 查看
背景
每天上下班在地铁中很无聊, 喜欢用手机看一些技术文档, 但大多技术网站的手机版样式惨不忍睹, 有些版式错乱,有些配色不协调.将网页另存为pdf是一个方法, 但放在手机上阅读字体小, 放大后需要横向来回滚动, 体验不佳.
解决思路
Chrome的打印功能可以直接将网页另存为pdf, 手机/pad/kindle都支持, 文件格式问题解决;将页面多余元素去掉, 调整文章的宽度, 并放大字号, 调整适合手机阅读尺寸, 这点使用js解决.
步骤:
打开文章, 如http://www.cnblogs.com/jpss/p/3931558.html;
按
F12打开开发者工具, 在控制台执行如下代码:
var el=$('.post'); $("*").not(el.find('*')).hide(); el.parents().andSelf().css({width:480,padding:0,margin:0,border:'none',float:'none',position:'static'}).show().find('img').css({maxWidth:470,height:'auto'}); $('body').css({background:'#fff',zoom:2.3});
按
Ctrl-P调出打印工具, 打印目标选择
另存为pdf, 保存到文件即可.
效果图如下:
PS: 可以根据设备屏幕大小或分辨率适当调整width和zoom值.
相关文章推荐
- 一句js将博客园文章转成手机/kindle易于阅读样式
- 如何在博客园的文章/随笔中添加可运行的js代码
- NodeJS写个爬虫,把文章放到kindle中阅读
- 博客园Remoting的一些文章索引,方便阅读
- 博客园样式-根据文章自动生成文章目录
- 博客园文章样式修改
- 博客园文章添加阅读目录及CSS样式的方法总结
- 在博客文章插入“可运行"js代码-博客园
- 【数据分析】6 点发的文章在博客园阅读量最高?
- 微信小程序实现博客园文章阅读功能
- 你所不知道的 Kindle - 阅读微信公众号文章
- 博客园文章添加阅读目录及CSS样式的方法总结
- 转:程序员的成长----源代码的阅读(博客园文章)
- 博客园的Markdown文章 样式优化 实战经历
- 使用了博客园的备份后得到一个xml文件,不知道有没有css或者xslt文件可以在本地阅读文章,在网上找了半天也没有找到解决办法,难道要自己写?
- [公告]Google个性化主页可以正常阅读博客园的RSS了
- 收藏 --2005年度博客园50篇精华文章预选结果
- 博客园服务器故障发生及处理全过程纪录[全部写完, 请阅读文后的注意]
- 博客园期刊1月(第5期)文章连接地址整理
- 今天看到促销小姐好漂亮,一冲动,就买了一大包雀巢咖啡(想不到第一次在博客园发文竟这种文章...)