如何检测“设备模式”（MVC3 + Bootstrap）答案

【问题标题】：How to detect "device mode" (MVC3 + Bootstrap)如何检测“设备模式”（MVC3 + Bootstrap）
【发布时间】：2013-01-23 11:12:36
【问题描述】：

我正在使用 MVC3 和 Bootstrap Responsive，我想通过 Razor（或 javascript）检测哪种模式处于活动状态（台式机、平板电脑或手机）以在一种或另一种情况下显示正确的局部视图。

例如：

@if( mode=='phone')
{
    @html.Partial("_partialPhone")
}
@if( mode=='desktop')
{
    @html.Partial("_partialDesktop")
}
...etc

我不想只使用 ".visible-phone" "visible-tablet" 和 ".visible-desktop" css 类，因为虽然只显示了一个局部视图，但它们都加载到 DOM 中并且由 Razor 引擎渲染。这不利于手机和平板电脑的性能。

谁能帮帮我？

谢谢

【问题讨论】：

标签： javascript css asp.net-mvc asp.net-mvc-3 twitter-bootstrap

【解决方案1】：

媒体查询发生在客户端上。
这基本上是不可能的。

您可以让客户端在 cookie 中设置其大小，然后读取服务器上的 cookie。

【讨论】：

如果我错了，请纠正我，它不一定是 cookie？初始页面加载后可能是 GET 参数/类似参数？
是的，但也许我可以通过 javascript 检测它并通过 Ajax 加载部分视图

【解决方案2】：

您应该可以使用 MVC4 来做到这一点（我不知道 MVC3 中是否存在此功能，但下面网站上的示例使用 MVC4，所以这就是我的回复所依据的）。

Switchable Mobile Views

您似乎可以开始制作名为 [ActionName].Mobile.cshtml 的文件，而 ASP.NET 在检测到来自移动设备的请求时会自动使用这些文件（这似乎是可自定义的，因此您可以为平板电脑或其他）。他演示的内容与您在 Razor 中询问的内容类似 - 他根据当前显示模式呈现不同的链接，但我认为这也适用于呈现不同的局部视图：

@if (Request.Browser.IsMobileDevice && Request.HttpMethod == "GET")
{
    <div class="view-switcher ui-bar-a">
        @if (ViewContext.HttpContext.GetOverriddenBrowser().IsMobileDevice)
        {
            @: Displaying mobile view
            @Html.ActionLink("Desktop view", "SwitchView", "ViewSwitcher", new { mobile = false, returnUrl = Request.Url.PathAndQuery }, new { rel = "external" })
        }
        else
        {
            @: Displaying desktop view
            @Html.ActionLink("Mobile view", "SwitchView", "ViewSwitcher", new { mobile = true, returnUrl = Request.Url.PathAndQuery }, new { rel = "external" })
        }
    </div>
}

虽然如果您有单独的移动视图和桌面视图，那么我认为您不需要像您询问的那样在两个部分之间手动切换。

Related information

【讨论】：

Thnks... @Request.Browser.IsMobileDevice 存在于 MVC3 中，但无法正常工作。为新设备返回“false”...
@Gonzalo 尝试在此处配置新的浏览器代理：%SystemRoot%\Microsoft.NET\Framework\[version number]\CONFIG\Browsers