Question

通过Google Chrome浏览器模拟器，我的网站格式正确，适用于iPhone5。请注意，这不是通过Visual Studio完成的，而是通过Chrome浏览器访问网站www.yeagertech.com。

右上角的LogOn凭据是：用户名：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);
        }

Answer 1

iPhone 5将屏幕分辨率提升至1,136 x 640像素，与之前的Retina Devices相同，每英寸326像素（ppi）。 iPhone会自动缩放视口以适应980像素，因此适用于大多数网页而无需任何更改。如果您想专门针对移动网站定位iPhone的默认屏幕尺寸，可以在布局中将以下元标记添加到头部：<meta name="viewport" content="initial-scale=1.0">并查看Safari Viewport Reference

您可以使用Opera Mobile模拟器复制Android上的内容 - http://www.opera.com/developer/tools/mobile/。另外，在Global.asax.cs中放置一些断点，并确保从用户代理获得预期结果。

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

在查看渲染之前，您需要修复JS错误。您正在加载JQuery之前加载jquery库。先解决这个问题。然后，请注意iPhone 5在4英寸屏幕上渲染@ 640px x 1136px。 Galaxy S-III在更大的屏幕上呈现720px宽度 - 这给许多开发人员带来了问题。对于快速入门，我建议您回到默认桌面＆amp;移动DisplayModes，然后看一下Bootstrap - http://twitter.github.com/bootstrap/index.html - Bootstrap是响应式设计的一个很好的快速入门。

使用ASP.Net MVC4进行自适应渲染

1 个答案: