ASP.NET MVC 4 顯示模式：為行動裝置優化視圖的伺服器端方案

CSS 媒體查詢與流體版面（RWD）雖能適應螢幕尺寸，但無法針對裝置能力（觸控、GPS、相機等）提供差異化體驗。ASP.NET MVC 4 引入顯示模式，讓伺服器端依裝置特性選擇專屬視圖，實現真正的「行動優先」。

顯示模式運作原理

控制器回傳 View("Index") 時，執行階段依請求裝置自動尋找對應視圖：

• 桌面瀏覽器 → Index.cshtml
• 行動裝置 → Index.Mobile.cshtml
• 自訂模式 → Index.{DisplayModeId}.cshtml

單一程式碼基礎，僅增加視圖檔案即可支援多裝置。

內建顯示模式查看

<h2> 目前啟用的顯示模式 (@DisplayModeProvider.Instance.Modes.Count mode(s)) </h2>
<ul>
@foreach(var d in DisplayModeProvider.Instance.Modes) {
    <li>@(String.IsNullOrEmpty(d.DisplayModeId) ? "default" : d.DisplayModeId)</li>
}
</ul>

自訂顯示模式註冊

於 Application_Start 註冊：

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone") {
    ContextCondition = ctx => ctx.GetOverriddenUserAgent().Contains("iPhone")
});

DisplayModeProvider.Instance.Modes.Insert(1, new DefaultDisplayMode("Tablet") {
    ContextCondition = ctx => ctx.GetOverriddenUserAgent().Contains("iPad") 
                            || ctx.GetOverriddenUserAgent().Contains("Android") 
                            && !ctx.GetOverriddenUserAgent().Contains("Mobile")
});

裝置能力偵測建議

僅靠 User-Agent 不足，建議整合 51Degrees、WURFL 或 DeviceAtlas 等裝置資料庫，取得螢幕尺寸、觸控支援、作業系統版本等豐富屬性，精準對應視圖。

適用情境

• 全新專案，需針對不同裝置類型提供差異化 UI/UX
• 既有網站需新增行動版子站，但希望共用 Controller 邏輯
• 特定裝置需大幅簡化功能或調整操作流程