ASP.NET MVC 4 Display Modes 實作 PC / Mobile 轉換 (四)後續

在經過了幾次測試之後，我們可以發現，這MVC 4的確有這種隨裝置轉換畫面的功能，可是似乎不是所有裝置都支援？ 

沒錯，根據實驗結果，目前有完整支援的只有IOS系統以及Windows Phone系列，其他如Android之類都不能確實的判斷，那該怎麼解決好呢？以下就要教大家來實作。 

MVC 4無法自動判定IOS和Windows Phone系統以外的裝置，沒關係，我們可以使用它另一個內建的功能，來強制使網頁針對不同的裝置做出正確判斷！

 



首先讓我們再度開啟Mvc4Internet專案底下的Global.asax.cs檔案。

將上面紅色框框中的程式碼加在檔案的最後，而其中紅字顯示的”Android”，就是我們要讓它判斷的裝置了。

使用這個方法，可以針對各種不同的裝置呈現出不同的畫面，例如Android、iPhone等等，另外也可以指定相異的瀏覽器，如MSIE9。

 

讓我們以Android為例子，修改完Global.asax.cs檔案之後，只要網頁偵測到使用者是使用Android系列的裝置，自動就會去抓取含有 .Android字樣的 .cshtml檔案。

由於我們只是要測試是否能夠成功轉換，因此只針對首頁用的到的檔案去做變更。

將Index.Mobile.cshtml、_Layout.mobile.cshtml、以及 _LoginPartial.mobile.cshtml三個檔案複製一份，並分別改名為Index.Android.cshtml、_Layout.Android.cshtml、與 _LoginPartial.Android.cshtml，這樣我們就有了Android專用的首頁了。

 

 

 

在開始測試之前，別忘了先對專案進行rebuild。

 

這時我們可能會碰到一個錯誤，告訴我們剛剛加入的DisplayModeProvider沒有定義！別擔心，將你的滑鼠移過去將它反白起來，會在左下角出現一個圖示，點選以後會出現一個下拉選單，我們選擇第一個選項using System.Web.WebPages，這時候再重新rebuild一次就正常囉，這是由於我們剛剛沒有將DisplayModeProvider所需要的library所import近來。

 

 

接下來再打開您的Firefox，隨便選擇一種Android device，這邊以Android 2.2 - HTC Evo – Mobile Safari 533.1為例子。

 

選取之後再度執行我們的專案，發現Android裝置也可以正常的判斷為行動裝置，並顯示Android的專用頁面了！

以上使用ASP.NET MVC 4，讓您的網頁在一般PC以及行動裝置上呈現不同的面貌教學告一段落，若有任何錯誤或疑問請不吝指教。