一句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值.