0

通过 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);
        }
4

1 回答 1

0

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

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

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

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

于 2012-12-15T20:07:33.053 回答