ASP.NET MVC3 と .aspx ページを使用して、Web サイトで作業しています。Web サイトは、同じサイトでデスクトップ ブラウザーと携帯電話をサポートします。サイトには 1 つのマスター ページがあります。多くの HTML が複製されるため、モバイル サイトへのリダイレクトは避けたいと考えています。ユーザー エージェントを使用して、モバイル デバイスがいつサイトにアクセスしたかを判断するつもりですが、ブラウザーをリダイレクトする代わりに、生成される HTML を制御するためにマスター ページで使用するフラグを設定します。
必要な HTML を生成するためのマスター ページを取得する最善の方法を判断するのに苦労しました。この問題を解決するために 2 つの戦略を考えていますが、これが最善の方法かどうかはわかりません。
最初の戦略は、モバイル フラグを使用して、モバイル固有の HTML コンテンツを追加、置換、または削除することです。長所: HTML の重複を最小限に抑える 短所: 複数の if ステートメント。2 つ目のモバイル固有の .css をダウンロードする必要があります。(html には複数の if ステートメントがあるため、実際には 2 つの css ファイルが必要です。1 つはモバイル用で、もう 1 つはモバイル用ではありません。1 つの css ファイルでこれを処理する特定性ルールを簡単に使用することはできません)。
この戦略を使用したマスター ページからの抜粋を次に示します。
<% if (isMobile)
{
Html.RenderPartial("MobileSearchControls");
}
else
{ %>
<div id="viewTabs" class="span3">
...
</div>
<% }
%>
<%--body --%>
<div id="bd" class="row-fluid">
<% if (!isMobile)
{ %>
<div id="left-column" class="span3">
<div id='controls-and-preferences'>
<asp:ContentPlaceHolder ID="LeftColumnContent" runat="server" />
</div>
</div><!--left-column -->
<% }
%>
<div id="main" class="span9">
<div id="search-results">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</div>
<% if (!isMobile)
{ %>
<div class="span2" id='right-column'>
</div>
<% }
%>
2 つ目の方法は、マスター ページの本文の大部分を、モバイル用とデスクトップ用の 2 つの部分に分割することです。長所: 追加の .css ファイルのダウンロードを回避します。(モバイル コードはモバイルの ID を持つ div にあり、css で特定性ルールを使用できるため)。短所: コードの重複が増える。相互に排他的なコード ブロック内にある場合でも、タグには一意の ID が必要です。
すべてのタグがモバイル タグの下にあるため、モバイル ページの css はより複雑になります。
この戦略を使用したマスター ページの同様の抜粋:
<% if (isMobile)
{
%>
<div id="mobile-search-controls">
<asp:ContentPlaceHolder ID="MobileSearchContent" runat="server" />
</div>
<%--body --%>
<div id="bd" class="row-fluid">
<div id="main" class="span9">
<div id="search-results">
<asp:ContentPlaceHolder ID="MobileMainContent" runat="server" />
</div>
</div>
</div>
<%--body end--%>
</div>
<%
}
else
{ %>
<div id="bd" class="row-fluid">
<div id="left-column" class="span3">
<div id='controls-and-preferences'>
<asp:ContentPlaceHolder ID="LeftColumnContent" runat="server" />
</div>
</div><!--left-column -->
<div id="main" class="span9">
<div id="search-results">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</div>
<div class="span2" id='right-column'>
</div>
</div>
<%--body end--%>
<% }
%>
どちらに行けばいいですか？3番目のより良い方法はありますか？