如何在 Visual Studio 2012 上查看 ASP.NET MVC 移动页面答案

【问题标题】：How to view an ASP.NET MVC mobile page on Visual Studio 2012如何在 Visual Studio 2012 上查看 ASP.NET MVC 移动页面
【发布时间】：2013-07-22 21:14:13
【问题描述】：

我有一个开源 ASP.NET MVC(nopcommerce) 或 nopcommerce.com，它是在 ASP.NET MVC 和 razor 视图中开发的，它是桌面版和移动版，例如它有 index.cshtml 和 Index。 mobile.cshtml，但我没有手机查看经验，

如果有人提供有关如何在 Chrome 和 IE 等浏览器上查看移动页面的线索，我将不胜感激。

【问题讨论】：

使用 Safari，您可以Develop > User Agent > iPhone 等。您还可以指定自定义用户代理字符串。

标签： c# asp.net asp.net-mvc-4 mobile

【解决方案1】：

在 MVC 中你会声明 display-modes

例如，在上面的链接中，他们声明了一个名为 WP 的模式，要访问该模式，您需要一个 index.cshtml（正常模式）和一个 index.wp.cshtml（检测到的模式）

一旦你得到它，你就可以通过测试你喜欢的任何东西来设置你喜欢的所有模式

例如我的 /APP_Start/DisplayModeConfig.cs

public class DisplayModeConfig
{
    public static void RegisterDisplayModes(DisplayModeProvider provider)
    {
        // INFO: Allows to name views/partials/masters like viewname.iphone.cshtml, and MVC will choose this automatically

        // INFO: Lets remove the default "Mobile" mode, since it's pretty useless
        var mobileDefault = DisplayModeProvider.Instance.Modes.First(m => m.DisplayModeId == "Mobile");
        if (mobileDefault != null)
        {
            DisplayModeProvider.Instance.Modes.Remove(mobileDefault);
        }

        // INFO: Now add one that actually works
        provider.Modes.Insert(0,
            new DefaultDisplayMode("Mobile")
            {
                ContextCondition = (context => (!string.IsNullOrEmpty(context.GetOverriddenUserAgent()) && Regex.IsMatch(context.GetOverriddenUserAgent(), @"mobile|android|kindle|silk|midp", RegexOptions.IgnoreCase | RegexOptions.CultureInvariant)))
            });


        // INFO: Order from least to most important (since we insert at position 0)
        provider.Modes.Insert(1,
            new DefaultDisplayMode("Win8")
            {
                ContextCondition = (context => (!string.IsNullOrEmpty(context.GetOverriddenUserAgent()) && context.GetOverriddenUserAgent().IndexOf("Windows NT 6.2", StringComparison.OrdinalIgnoreCase) >= 0))
            });
    }
}

@Request.Browser.* 中还有很多好东西，例如 @Request.Browser.IsMobileDevice、@Request.Browser.Version、..大多数都可以正常工作，但我会在依赖这些助手之前对其进行测试。

【讨论】：

也就是说，不要因为可以就疯狂地使用显示模式。对于简单的 css/js 东西，坚持特征检测。仅当您需要切换整个页面或页面的相当大部分时才应使用 DisplayModes。例如，Chrome 有一个带有精美滑块的局部视图，而 IE 则更兼容，其中 JS、CSS 和 HTML 将完全不同。要调整设计，请查看响应式设计和@media-queries

【解决方案2】：

取决于您可能需要的站点如何进行移动检测：

调整来自浏览器的“用户代理”字符串。为此有很多工具/插件。
设置某种 cookie
查看网站是否直接支持“使用移动视图”（即http://www.xbox.com 在底部有这样的链接）。

【讨论】：