我正在构建一个网站的移动版本,在这种特定情况下,它在水平布局中看起来很完美.有没有办法强制这种布局无论用户设置是什么?
一些普遍的方式的答案是值得赞赏的,但如果你知道如何在任何特定的平台(iPhone,Android ..)上实现这一点,那么也许我们可以收集一套体面的规则来瞄准大多数移动用户.
我已经看到了很多关于这方面的问题,但是对于如何在使用DefaultDisplayMode类确定移动网站的Razor/MVC网站中如何做到这一点没有明确的答案.此外,很多答案只是代码片段,没有代码所在的详细信息(在控制器,视图,CSS等?)
所以首先,有一个调用EvaluateDisplayMode()的Global文件:
的Global.asax.cs
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
BundleConfig.RegisterBundles(BundleTable.Bundles);
WebApiConfig.Register(GlobalConfiguration.Configuration);
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
DeviceConfig.EvaluateDisplayMode();
}
}
Run Code Online (Sandbox Code Playgroud)
App_Start文件夹中的EvaluateDisplayMode基于GetOverriddenUserAgent()类型设置移动和桌面类:
DeviceConfig.cs
public static class DeviceConfig
{
const string DeviceTypePhone = "Mobile";
public static void EvaluateDisplayMode()
{
DisplayModeProvider.Instance.Modes.Insert(0,
new DefaultDisplayMode(DeviceTypePhone)
{
ContextCondition = (ctx => (
(ctx.GetOverriddenUserAgent() != null) &&
(
(ctx.GetOverriddenUserAgent().IndexOf("android", StringComparison.OrdinalIgnoreCase) >= 0) ||
(ctx.GetOverriddenUserAgent().IndexOf("iPhone", StringComparison.OrdinalIgnoreCase) >= 0) ||
(ctx.GetOverriddenUserAgent().IndexOf("Window Phone", StringComparison.OrdinalIgnoreCase) >= 0) ||
(ctx.GetOverriddenUserAgent().IndexOf("Blackberry", StringComparison.OrdinalIgnoreCase) >= 0)
)
))
});
}
}
Run Code Online (Sandbox Code Playgroud)
每个页面都有一个名为_AdminMaster.Mobile.cshtml的Layout/Master页面,它使用一个名为PhoneCommon.css的CSS文件.CSS没有什么特别之处(移动与桌面;没有媒体查询;我没有正确的CSS,我从客户端使用的另一个开发人员那里继承了它),除了高度没有一直延伸到底部页.这是CSS的一部分(相当冗长):
#main #content …Run Code Online (Sandbox Code Playgroud)