1

我正在使用 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 渲染引擎。这对手机和平板电脑的性能不利。

谁能帮我？

谢谢

4

2 回答 2

3

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

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

于 2013-02-07T19:55:46.343 回答
0

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

可切换的移动视图

看来您可以开始制作名为 [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>
}

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

相关信息

于 2013-02-07T22:13:38.040 回答