Mobile 基于ASP.NETMVC4的自适应渲染

通过Google Chrome浏览器模拟器，我的网站为iPhone5设置了正确的格式。请注意，这不是通过Visual Studio实现的，而是通过使用Chrome浏览器访问网站www.yeagertech.com实现的

右上角的登录凭据为： 用户名：stageadmin 电邮地址：wsyeager36@msn.com 密码：1234567

当我试图直接从iPhone5本身进入该网站时，它的格式仍然像桌面浏览器。当我直接通过手机本身而不是模拟器查看站点时，Android手机和Windows手机也会发生同样的情况

有人知道我还需要做些什么来获得正确的格式吗

在我的Global.asax文件中，我只需要以下内容：

protected void Application_Start()
        {
            DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("windowsphone")
            {
                ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
                    ("windowsphone", StringComparison.OrdinalIgnoreCase) >= 0)
            });

            DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
            {
                ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
                    ("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)
            });

            DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("Android")
            {
                ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
                    ("Android", StringComparison.OrdinalIgnoreCase) >= 0)
            });

            DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPad")
            {
                ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
                    ("iPad", StringComparison.OrdinalIgnoreCase) >= 0)
            });

            AreaRegistration.RegisterAllAreas();

            RegisterGlobalFilters(GlobalFilters.Filters);
            RegisterRoutes(RouteTable.Routes);
        }

---

iPhone5将屏幕分辨率提高到1136x640像素，与以前的视网膜设备相同，分辨率为每英寸326像素（ppi）。iPhone会自动缩放视口以适应980像素，因此它可以在不做任何更改的情况下很好地处理大多数网页。如果您想专门针对移动站点的iPhone默认屏幕大小，可以在布局的头部添加以下元标记：

，并查看

你可以用Opera Mobile Emulator复制Android上发生的事情。另外，在Global.asax.cs中放置一些断点，并确保从用户代理获得预期的结果

我还建议在每个设备的唯一视图中放置一些调试代码，以确保为每个设备呈现预期的视图

---

在查看渲染之前，需要修复JS错误。在加载jquery之前，您正在加载jquery库。先把它修好。然后，请注意，iPhone 5在4英寸屏幕上呈现@640px x 1136px。Galaxy S-III在稍大一点的屏幕上呈现720px宽，这给许多开发者带来了问题。对于快速启动，我建议回到默认的桌面和移动显示模式，然后看看Bootstrap——Bootstrap是响应性设计的一个很好的快速启动。

我不应该只使用我在global.asax文件的原始帖子中编辑的内容吗？根据我读到的所有内容，这应该考虑到正确的渲染。你有一个_layout.iPhone.cshtml或index.iPhone.cshtml吗？DisplayModeProvider说-如果UserAgent包含“iPhone”，则使用_layout.iPhone.cshtml&index.iPhone.cshtml呈现视图。请参阅注释处的解释-DisplayModeProvider中已经有两项：默认桌面版本的空字符串和“mobile”是，对于我在global.asax文件中拥有的每种类型的手机，我都有一个与您提到的命名约定类似的母版页。就像我提到的，如果您使用Chrome及其内置模拟器查看网站，它会呈现良好效果。当我真的用手机访问网站时，它不会正确呈现。