一句js将博客园文章转成手机/kindle易于阅读样式
背景
每天上下班在地铁中很无聊, 喜欢用手机看一些技术文档, 但大多技术网站的手机版样式惨不忍睹, 有些版式错乱,有些配色不协调.
将网页另存为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值.
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验