Question

我正在使用带有.aspx页面的ASP.NET MVC3在一个网站上工作。该网站支持具有相同站点的桌面浏览器和移动电话。该网站有一个主页面。我想避免重定向到移动网站，因为这会复制很多HTML。我仍然打算使用用户代理来确定移动设备何时访问该站点，但是我没有重定向浏览器，而是设置了一个我在主页面中使用的标志来控制生成HTML。

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

第一个策略是使用移动标志添加，替换或删除特定于移动设备的HTML内容。专业版：尽量减少HTML的重复 Con：多个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>
           <%  }
           %>

第二种策略是将母版主体的大部分分为两部分，一部分用于移动，一部分用于桌面。 Pro：避免下载额外的.css文件。（因为移动代码可以在id为mobile的div中，并在css中使用特殊规则）。 Con：更多的代码重复。标签必须具有唯一的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--%>
<% }
    %>

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

Answer 1

您可能需要考虑使用Twitter Bootstrap（http://twitter.github.com/bootstrap/）等框架。

他们有一些适用于任何分辨率设备的示例：

http://twitter.github.com/bootstrap/examples/fluid.html

Answer 2

你应该使用css 3媒体查询这样的事情..看看这个链接它有一个演示
http://webdesignerwall.com/demo/adaptive-design/final.html

Answer 3

user277498，

我已使用适用于vs的移动就绪HTML5 MVC.NET模板：

http://visualstudiogallery.msdn.microsoft.com/9df9c61c-4d90-43e5-9aa1-a58786b7a1e4

效果很好。这基本上有一个viewengine，允许视图被指向twds移动和/或正常mvc。它实际上是非常神奇的＃39;它的工作方式。尝试一下，我已经在3个项目中使用过，没有打嗝。

适用于移动和非移动网站的ASP.NET MVC网站？

3 个答案: