實做步驟：
從這開始我們以Mvc4Internet為主體，將mobile的部分import過來，使得不同的裝置可以顯示不同畫面。
首先，在Mvc4Internet專案底下，新增一個資料夾，我們將它命名為MobileContent，表示這個資料夾是用來擺放行動版的content，並且和PC版的content做個區別。
再來我們將要把原本存放在行動版專案底下的檔案移轉過來，對MobileContent點選右鍵→選擇Add→選擇Existing
Item…來插入現有的檔案。
找到行動版專案Mvc4M obile中的Content資料夾，將底下的7個 .css檔案選起來，並按下Add加入我們的資料夾。
完成之後您的專案應該長這樣。
接下來依照上面的步驟，在MobileContent底下新增一個資料夾，命名為Images。
接著在Images資料夾底下插入現有檔案。
找到Mvc4M obile中的Content底下的Images資料夾，將裡面的檔案全部選擇，並按下Add加入現在的專案中。
完成後您的專案應該長這樣。
這些檔案影響了行動版網頁的版面配置以及圖示。
接著我們要將行動版的 .js檔import近來。
在Mvc4Internet中的Scripts資料夾底下，插入現有檔案。
找到Mvc4M obile中的Scripts資料夾中含有mobile字樣的 .js檔，選取後按下Add按鈕加入目前專案。
這兩個檔案影響了我們頁面以及圖案的連結，並且寫入了滑鼠和觸控時的對應動作。
少了mobile的 .js檔，我們的行動版網頁會變成這樣。
下面我們要處理的是網頁頁面的部分。
若您也是使用新建的專案，在Mvc4Internet以及Mvc4M obile底下的Views中，都會含有Account、Home、Shared等三個資料夾，而其底下的 .cshtml檔案，就是我們的頁面。
將所有Mvc4M obile中Views下的 .cshtml檔案備份後改名，命名原則為在 .cshtml前加上 .mobile，例如原Index.cshtml改名後為Index.mobile.cshtml，並將改名後的檔案import到Mvc4Internet中的相對位置，如原本Index.cshtml是在Home底下，import過來依然要放在Home中。
之後您的Mvc4Internet專案的Views資料夾應該類似上圖所示。
注意 _ViewStart.cshtml這個檔案不需要去動它，此檔案決定了當你開啟網頁時要讀取哪個Layout檔，而由於我們可以自動判讀，因此可以不用管它，若有特殊需要也可以在每個頁面另外指定要讀取的Layout檔案。
接著讓我們開啟
_Layout.mobile.cshtml檔案，由於是直接從另一個專案copy過來的，勢必要做一些調整。
針對圖中紅圈處，將其由原本的
~/Content/css改為
~/MobileContent/css，也就是我們剛剛新建立的，用來放行動版檔案的資料夾，這裡意思是讓它把MobileContent底下的 .css檔全部包起來。
最後讓我們來修改一下Global.asax.cs這個檔案，檔案拉到最下面，將原本的BundleTable.Bundles.RegisterTemplateBundles();
給註解掉，並新加入一行BundleTable.Bundles.EnableDefaultBundles();
。
到這基本的搬移與修改都完成了，讓我們來測試一下吧。
首先點選專案名稱→右鍵→Rebuild，將專案重新建置。
開啟Firefox，點選工具，確認目前的瀏覽器選擇為預設的Default User Agent，也就是說，它就是你安裝的Firefox版本。
執行我們的Mvc4Internet專案，會顯示出PC版的網頁如上圖。
再來讓我們試試看Firefox的模擬功能。
選擇工具，並在選單內選擇一種行動裝置，這裡我們選擇模擬iPhone 3.0。
選好之後重新整理，恭喜您，若沒有設定錯誤，您看到的將會是行動版本的畫面。
這期間我們並沒有重新執行專案，只是在切換瀏覽器狀態後重新整理一次，畫面即由PC版本跳至行動版本，可見我們的自動轉換確實的完成了實做！
沒有留言:
張貼留言