Asp.net mvc 适用于移动和非移动站点的ASP.NET MVC站点？

我正在一个网站上工作，使用ASP.NET MVC3和.aspx页面。该网站支持桌面浏览器和同一网站的手机。该站点只有一个母版页。我希望避免重定向到移动站点，因为那样会复制大量html。我仍然打算使用用户代理来确定移动设备何时访问该站点，但我没有重定向浏览器，而是在母版页中设置了一个标志来控制生成的HTML

我在确定获取母版页以生成所需HTML的最佳方法时遇到了麻烦。我有两种策略来解决这个问题，但我不知道这是否是最好的方法

第一种策略是，使用mobile标志添加、替换或删除特定于移动设备的HTML内容。 赞成：最小化HTML的重复 Con：多个if语句。 需要下载第二个特定于移动设备的.css。（因为html有多个if语句，我们真的需要两个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>
           <%  }
           %>

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

...

第二种策略是将母版页中的大部分正文分为两部分，一部分用于移动设备，另一部分用于桌面。 Pro：避免下载额外的.css文件。（因为移动代码可以位于id为mobile的div中，并在css中使用特殊性规则）。 缺点：代码重复更多。 标记必须具有唯一的ID，即使它们位于相互排斥的代码块中。
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>
           <%  }
           %>

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

---

我该走哪条路？还有第三种更好的方法吗？

您应该使用css 3媒体查询来查询类似的内容。。看看这个链接，它有一个演示

---

您可能需要考虑使用一个框架，例如推特引导程序（http://twitter.github.com/bootstrap/)

它们有一些在任何分辨率的设备上都能正常工作的示例：

用户277498

我已经为vs使用了支持移动的HTML5 MVC.NET模板：

---

效果很好。这基本上有一个viewengine，它允许将视图定向到twds mobile和/或普通mvc。事实上，它的工作方式相当“神奇”。试试看，我已经在3个项目中使用过了，没有任何问题。

@ShawnC。这还不够。因为移动站点在某些方面得到了简化和重组，同时保留了网站的某些元素（因此担心代码重复），而没有任何更改。MVC 4对移动站点有很多支持。看我的教程谢谢！我们正在使用媒体查询和引导。我们仍然需要修改一些页面。删除移动网络的一些功能，并简化其他一些功能。谢谢！我们正在使用媒体查询和引导。我们仍然需要修改一些页面。删除移动网络的一些功能，并简化其他一些功能。我认为最简单的方法是在媒体查询中，您可以在要隐藏在移动屏幕分辨率中的div上使用CSS“display:none”