2012年9月3日 星期一

ASP.NET MVC 4 Display Modes 實作 PC / Mobile 轉換 (一)事前準備

本篇要來分享的就是:如何使用微軟的ASP.NET MVC 4中的 Disolay Modes功能,來實作讓您的網頁在一般PC以及行動裝置上呈現不同的面貌。
 
雖然網路上有不少類似的教學,但是很多都沒有詳細的步驟,不是缺這裡就是缺那裏,故而分享此篇從頭動手做,希望能對有需要的人有更多的幫助。

本次DEMO為在一般PC版網頁專案下加入行動版的網頁,若您已經有完整的PC版以及行動版專案,可以直接從實作部分開始看。
 

事前準備:

首先最最重要的,我們的工具要先準備好。
 
您可以在microsoft的網站找到Visual Studio,依據您的需要選擇版本。
 
再來至ASP.NET的網站下載並安裝ASP.NET MVC 4

為了之後測試需要,我們還要安裝Firefox外掛套件。

至以下網址下載 .xml檔案並儲存。
 
下載完以後,還要進行import的動作。
 


開啟Firefox,點選工具→Default User AgentEdit User Agents…
 
 
 
點選左下角的Import…,並找到剛剛下載的 .xml檔案的位置,該檔案名稱為useragentswitcher.xml,選擇並開啟檔案。


 

這時在您的User Agents欄位中的選項應該有出現類似上面這些項目(或著更多),按下確定按鈕結束,之後我們就可以使用Firefox來模擬各種裝置了。