作者簡歷

畢業於政治大學資訊管理研究所，任職於凌群電腦SDPM團隊研發替代役，負責SASP、Service與MyNote等內部系統的開發、維護與組態管理，曾參與CMMI 與ISO認證。主要專長為ASP.NET、Windows Communication Foundation(WCF)與SQL Server 應用。

前言

根據Newzoo於2017年4月發布的報告，台灣智慧型手機使用人數已經達到了16,596,000人，滲透率達七成，顯示了行動裝置眼球數是非常龐大的，行動裝置上運行的應用程式又可分為原生應用程式(Native app)與網頁應用程式(Web app)兩種，原生應用程式即是Android/iOS行動裝置中，到Google play store 或App store中下載安裝的各式app；網頁應用程式則是藉由瀏覽器去使用的，與網站(Website)是一樣的技術，傳統為電腦顯示而設計的網站，雖然也可以在行動裝置上顯示，但可能會因為使用者體驗不佳而失去了龐大的市場，為了跟上行動化的趨勢，系統服務業者必須找尋合適的服務行動化方案。

行動化的選擇

雖然原生應用程式有效能上的優勢，但在已經存在電腦版網頁的基礎上，網頁應用程式在技術門檻上有很大的優勢，因為各大行動裝置瀏覽器都能夠運行網頁技術所使用的HTML、CSS與JavaScript，也具有跨平台的優點，綜合起來網頁應用程式的方案是較為合適的。

行動網頁的設計可分為兩種，第一種為電腦版與行動版分開設計，系統根據使用者的裝置而導入到不同的網頁，優點為設計方式簡單，開發成本也較低，缺點則是通常需要兩個網址，分為兩個網站來維護，維護的成本高；第二種是現今流行的響應式網頁設計，只需要一個網址，系統會根據使用者螢幕尺寸將頁面上的元件排列縮放成合適的樣式，優點是只需要維護一個網站，缺點是舊有的網站將要大幅的改動設計，開發成本高。

所幸ASP.NET MVC4版本之後支援Display Mode的功能，加上MVC關注點分離的特性，即使採用電腦版與行動版分開設計的方法也可以共用一個網址，維護上只需要專注於View，與電腦版共用Controller與Model，將開發與維護的成本降到最低。

Display Mode

ASP.NET MVC 的 Display Mode可以依照使用者瀏覽器的UserAgentString來選擇要顯示的View，預設的Display Mode有兩個，一個是Mobile，一個是預設(空字串)，如果要新增自訂的Display Mode，打開Global.asax，在Application_Start()中新增，範例新增一個叫做SDPM的Display Mode，在瀏覽器是IE的時候顯示。



接下來在View新增有Display Mode名稱後綴的檔案，例如Index.SDPM.cshtml與Index.Mobile.cshtml，這樣一來Index這一頁就有三種不同的顯示方式了，如下圖所示:



jQuery Mobile

jQuery Mobile 使用HTML5(Markup-driven)來配置行動網頁的UI，每一頁都是由<div>標籤配合data-role屬性所構成，可以減少在前端撰寫JavaScript與jQuery程式碼，常用的標籤類型如<ul><li>、各類<input>等都會長成適合行動裝置的樣式，不需要花費額外的心力去撰寫CSS。

因為螢幕尺寸與操作方式與電腦大相逕庭，所以頁面設計的考量也不一樣，常見的設計要素有簡潔、單欄式設計、摺疊目錄與按鈕回饋等，可以使用jQuery Mobile來協助我們達到上述的設計要素。

製作客戶選單行動版

電腦版的Customer.cshtml頁面有一個table與側邊選單，如下圖:



在Customer.Mobile.cshtml上將電腦版頁面上的側邊選單改成導航欄(data-role=”navbar”)，顯示資料的table改成List View的模式。





將過多的內容或功能做刪減，例如手機板的不能選擇非合約客戶等，將各控制項用合適的包裝起來，達到摺疊等特殊效果。

《圖六》被data-role包起來的控制項

最後再加上一個footer。

《圖七》footer

這樣Customer.Mobile.cshtml的初步架構就完成了，用手機輸入與電腦相同的網址，出現的就是手機板的樣式:

《圖八》客戶選單於手機上的樣式

結語

利用ASP.NET MVC Display Mode加上jQuery Mobile，我們可以很容易的設計出跨平台的行動網頁，但與其他電腦版與行動版分開設計的模式不同的是，在設計系統時必須與響應式網頁一樣，也需要考量到不同裝置的效能問題，每一種行動化的方案都有其適用性，沒有放諸四海的最佳解，組織需要考量自身的技術門檻、預算、時程與舊有系統，才能選擇出最適的行動化方案。

參考資料

1.蔡文龍(2016)。Visual C# 2015程式設計經典。台北:碁峰資訊股份有限公司。
2.demo、小朱、陳傳興、王育民與陳仕傑(2016)。ASP.NET MVC5 網站開發美學(9刷)。台北:碁峰資訊股份有限公司。
3.https://en.wikipedia.org/wiki/List_of_countries_by_smartphone_penetration
4.https://dotblogs.com.tw/rainmaker/2012/06/21/72946
5.https://jquerymobile.com/
6.https://www.inside.com.tw/2011/03/28/10-mobile-web-design
7.https://hkitblog.com/%e6%b7%ba%e8%ab%87-web-app-%e5%8f%8a-native-app-%e7%9a%84%e6%9c%aa%e4%be%86/
8.http://www.w3school.com.cn/jquerymobile/