背景
每天上下班在地鐵中很無聊, 喜歡用手機看一些技術文件, 但大多技術網站的手機版樣式慘不忍睹, 有些版式錯亂,有些配色不協調.
將網頁另存為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值.