javascript - 「デバイスモード」を検出する方法（MVC3 +ブートストラップ）

Question

私はMVC3とBootstrapResponsiveを使用していますが、Razor（またはjavascript）によって、アクティブなモード（デスクトップ、タブレット、または電話）を検出して、正しい部分ビューを表示したいと考えています。

例えば：

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

「.visible-phone」、「visible-tablet」、「。visible-desktop」のcssクラスだけを使用したくありません。表示されるのは部分的なビューだけですが、それらはすべてDOMに読み込まれ、Razorによってレンダリングされるためです。エンジン。そして、それは電話やタブレットのパフォーマンスには良くありません。

誰か助けてもらえますか？

ありがとう

Answer 1

メディアクエリはクライアントで発生します。
これは基本的に不可能です。

クライアントにCookieでサイズを設定させてから、サーバーでCookieを読み取ることができます。

Answer 2

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>
}

ただし、モバイルビューとデスクトップビューが別々になっている場合は、質問しているように2つのパーシャルを手動で切り替える必要はないと思います。

関連情報