Question

在.NET Core文档中有一个标题为“构建移动特定视图”的页面，但正在构建中：https://docs.asp.net/en/latest/mvc/views/mobile.html。

有没有人对构建移动视图或成功进行设备检测有所了解？

Answer 1

基于浏览器的用户代理提供特定视图是一个过时的概念，因为它没有充分说明设备的功能。例如，iPhone和iPad有不同的屏幕尺寸，甚至移动浏览器也允许更改用户代理。

新概念称为响应式设计，其中一个创建单个页面，根据可用的屏幕宽度拟合和显示/隐藏某些元素。一个流行的响应式设计CSS框架是Bootstrap，最初由Twitter开发，后来开源。

Here是响应式设计的一个例子。当您转到site并更改浏览器的宽度时，设计也会通过浏览器或移动设备（使用汉堡菜单）更新3到2到1列设计。

Answer 2

此功能实际上并未由microsoft实现。这个问题有几个公开讨论：

作为他们的通用答案 - 使用响应式网页设计和CSS媒体查询（从我的观点来看，这并不是声称自己构建通用Web框架的团队的完美答案）。此功能有一个实现作为拉取请求 - https://github.com/aspnet/Mvc/pull/4878。

由于这个拉取请求似乎被遗忘了，我将此代码提取到可用的单独项目中 https://github.com/laskoviymishka/MvcDeviceDetector

您可以使用此实现（很容易添加到现有MVC项目中）或实现此功能。这非常简单 - 您只需要实现并为此重新加入自己的IViewLocationExpander。

Answer 3

这可以使用RazorViewEngineOptions在.Net Core中处理

1）创建服务LocationExpanderService.cs

 public class LocationExpanderService : IViewLocationExpander
{

    public IEnumerable<string> ExpandViewLocations(ViewLocationExpanderContext context,
        IEnumerable<string> viewLocations)
    {
        //replace the Views to MyViews..  

        var viewLocationsFinal = new List<string>();
        if (!string.IsNullOrEmpty(context.Values["viewCustom"]))
        {
            foreach (var viewLocation in viewLocations)
            {
                viewLocationsFinal.Add(viewLocation.Replace(".cshtml", ".mobile.cshtml"));
            }
        }
        viewLocationsFinal.AddRange(viewLocations);
        return viewLocationsFinal;
    }

    public void PopulateValues(ViewLocationExpanderContext context)
    {

        var userAgent = context.ActionContext.HttpContext.Request.Headers["User-Agent"].ToString().ToLower();
        var viewCustom = userAgent.Contains("android") || userAgent.Contains("iphone") ? "mobile" : "";
        context.Values["viewCustom"] = viewCustom;
    }
}

2）在startup.cs中配置服务

  services.Configure<RazorViewEngineOptions>(o =>
        {
            o.ViewLocationExpanders.Add(new LocationExpanderService());
        });

3）使用.mobile扩展名创建视图

Index.mobile.cshtml

移动特定视图/设备检测

3 个答案: