前言

從2005年開始撰寫第一篇技術博客，我也算是國內最早的一批技術博客作者之一了。其中中斷過一段時間，但2008年重新啟用之后，這個習慣一直保留到現在，目前已經累積的文章數量已經達到1226篇。這些文章絕大部分都是原創的，轉載的有特別注明，文章內容大多是自己實際工作中遇到的問題和解決方案，或者我為企業做顧問服務、培訓服務時解決的問題，我尤其喜歡在解決問題后做一點總結，並整理成一篇博客文章分享出來，一來是對思路的重新梳理，同時也希望也許日后能對其他人也有所幫助。

這些年隨着移動互聯網逐漸占據主流，我也參與一些移動Web開發的實踐中，有幾次都想過這樣一個問題：如何讓這些博客文章更好地在移動設備上進行閱讀呢？從技術上說，PC版本的瀏覽器，因為屏幕較寬，所以更加易於閱讀博客文章，而同樣的網頁在手機上面來看，效果就會差很多。

大家可以看到，如果不做任何地處理，那么手機瀏覽器只會簡單地將頁面按照比例縮小。這樣的結果往往就是字體很小，閱讀困難。但如果像下面這樣，是不是會更加好一些呢？

從這些年的實踐來看，我總結出來移動化Web頁面應該有幾個特點

1.字體要略大一些，內容上應該要有所過濾，去除干擾元素，讓用戶可以專注內容

2.布局上面要適應移動設備的寬度和高度

3.交互方式，應該考慮到用戶是用觸摸，而不是用鼠標。鏈接和按鈕要醒目。

4.不要過多地讓用戶輸入內容

所以說，網站的移動化其實涉及到頁面布局的重新設計。而可喜的是，在移動化Web 開發方面，已經有一些較好的框架。我很推薦的是jquerymobile。請參考官方的網站：

解決方案

今天早上起來花了一點時間，做了一個功能，能夠直接將博客文章轉換為手機的版本。使用方式是這樣的：

1. 找到你要轉換的博客文章地址，例如 http://www.cnblogs.com/chenxizhang/archive/2013/05/20/3088196.html

在PC版瀏覽器看起來是下面這樣的

2. 通過在這個地址前面添加一段前綴( http://webfeed.azurewebsites.net/home/displayonlineblog?url=) ,也就是說，完整的地址是：http://webfeed.azurewebsites.net/home/displayonlineblog?url=http://www.cnblogs.com/chenxizhang/archive/2013/05/20/3088196.html。如果有做過MVC開發的朋友一看就知道，這個是我設計的一個特別的Action。里面的功能其實也不難，就是先下載博客原文的內容，然后再結合框架進行重新格式化。

【重要】需要注意的是，我做的這個功能，是會自動識別瀏覽器的，如果你仍然是用PC版瀏覽器打開上面提到的地址，那么看到的界面將是下面這樣

但如果你真的使用移動設備，例如手機來訪問，就會看到下面的效果

值得一說的是，我並不是簡單地改了部署，對其中的內容元素也會有些特殊的處理。例如針對圖片，我會添加一個樣式表，讓他們能自動適應手機屏幕尺寸。（哪怕實際上它的寬度是很大的）。同時，對於博客文章一些內部鏈接（鏈接到博客園的任意其他文章），會自動將鏈接地址換成移動化版本的），細心的朋友可以從下圖中看到實際上里面的鏈接地址是換掉了。

上面說到的這個方法，很簡單實用，你可以不受任何限制地使用這個地址格式，為你的博客文章自動“生成”一個移動的版本，你可以將這些鏈接分享給你的朋友，讓他們在移動設備上面可以更好地瀏覽你的文章。

【備注】大家可以會對webfeed.azurewebsites.net這個網站感興趣，這是我最近的一個企業培訓練習項目（大家還沒有完全做完），這個網站分別演示了如何整合PC版瀏覽器和移動版瀏覽器（上面說到過了，他們會有不同的布局和交互功能），使用的技術是ASP.NET MVC 4 + jQuery Mobile + Knockoutjs 等。這個網站是托管在微軟的Microsoft Azure中的，當前我使用的是免費模式，可能有時候比較慢。請見諒。

【備注】我將一直會保留這個網站。