我正在一个网站上工作,使用 ASP.NET MVC3 和.aspx页面。该网站支持具有同一站点的桌面浏览器和移动电话。网站只有一个母版页。我想避免重定向到移动网站,因为这会重复很多 html。我仍然打算使用用户代理来确定移动设备何时访问网站,但我没有重定向浏览器,而是设置了一个标志,我在母版页中使用该标志来控制生成的 HTML。
我在确定使母版页生成所需 HTML 的最佳方法时遇到了麻烦。我想到两个策略来解决这个问题,但我不知道这是否是最好的方法。
第一种策略是,使用移动标志添加、替换或删除特定于移动的 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文件。(因为移动代码可以位于 id 为 mobile 的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--%>
<% }
%>
我应该走哪条路? 还有第三种更好的方法吗?
您可能需要考虑使用 Twitter Bootstrap (http://twitter.github.com/bootstrap/( 等框架。
他们有一些示例可以在任何分辨率的设备上很好地工作:
http://twitter.github.com/bootstrap/examples/fluid.html
你应该使用CSS 3媒体查询来做这样的事情..看看这个链接它有一个演示
http://webdesignerwall.com/demo/adaptive-design/final.html
user277498,
我已经将移动就绪HTML5 MVC.NET 模板用于:
http://visualstudiogallery.msdn.microsoft.com/9df9c61c-4d90-43e5-9aa1-a58786b7a1e4
效果很好。 这基本上有一个视图引擎,允许视图定向 TWDS 移动和/或普通 MVC。 它的工作方式实际上非常"神奇"。 试一试,我已经在 3 个项目中使用了,没有打嗝。