一句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});

1. 按Ctrl-P調出打印工具, 打印目標選擇另存爲pdf, 保存到文件便可.

效果圖以下:

PS: 能夠根據設備屏幕大小或分辨率適當調整width和zoom值.