一句js将博客园文章转成手机/kindle易于阅读样式

背景

每天上下班在地铁中很无聊, 喜欢用手机看一些技术文档, 但大多技术网站的手机版样式惨不忍睹, 有些版式错乱,有些配色不协调.

将网页另存为pdf是一个方法, 但放在手机上阅读字体小, 放大后需要横向来回滚动, 体验不佳.

解决思路

1. Chrome的打印功能可以直接将网页另存为pdf, 手机/pad/kindle都支持, 文件格式问题解决;
2. 将页面多余元素去掉, 调整文章的宽度, 并放大字号, 调整适合手机阅读尺寸, 这点使用js解决.

步骤:

1. 打开文章, 如http://www.cnblogs.com/jpss/p/3931558.html;
2. 按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});

3. 按Ctrl-P调出打印工具, 打印目标选择另存为pdf, 保存到文件即可.

效果图如下:

PS: 可以根据设备屏幕大小或分辨率适当调整width和zoom值.