我正在一个网站上工作，使用带有 .aspx 页面的 ASP.NET MVC3。网站支持桌面浏览器和手机同站。该站点有一个母版页。我想避免重定向到移动网站，因为这会重复很多 html。我仍然打算使用用户代理来确定移动设备何时访问该站点，但我没有重定向浏览器，而是设置了我在母版页中使用的标志来控制生成的 HTML。
我在确定让母版页生成我想要的 HTML 的最佳方法时遇到了麻烦。我有两种解决这个问题的策略，但我不知道这是否是最好的方法。
第一个策略是，使用 mobile 标志来添加、替换或删除特定于移动设备的 HTML 内容。优点：最大限度地减少 HTML 的重复 缺点：多个 if 语句。需要下载第二个特定于移动设备的 .css。（由于 html 有多个 if 语句，我们确实需要 2 个 css 文件，一个用于移动设备，一个用于非移动设备。我们不能轻易使用特定性规则在一个 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>
<% }
%>
第二种策略是将母版页中的大部分正文分为两部分，一部分用于移动设备，另一部分用于桌面。优点：避免下载额外的 .css 文件。（因为移动代码可以在 div 中，id 为 mobile 并在 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--%>
<% }
%>
我应该走哪条路？还有第三种更好的方法吗？