如何使用 51degrees.mobi 检测触摸屏移动设备

Question

我正在使用 Scott Hanselman 的 MobileViewEngines describe here 和 51Degrees.mobi 浏览器数据库来为移动和桌面浏览器呈现不同的视图。

我现在想添加一个中间立场。适用于高端移动浏览器（苹果、安卓、windows phone、一些黑莓等）。我正在考虑使用触摸屏来区分这一类别。

那么，两个问题：

1. 如何使用 51Degrees.mobi 检测触摸屏？
2. 触摸输入是一种好方法吗？ （我需要桌面、高端、低端品类）

Answer 1

我在 51Degrees.mobi 工作。您可以使用Request.Browser["IsTouchScreen"]检测设备是否为触摸屏

但是，在 MVC 中优雅地使用它有点复杂。从 MobileCapableViewEngine 的来源来看，您似乎可以通过复制移动引擎并更改 FindView 方法来制作新引擎：

public override ViewEngineResult FindView(ControllerContext controllerContext, string viewName,
                                              string masterName, bool useCache)
    {
        string overrideViewName = controllerContext.HttpContext.Request.Browser["IsTouchScreen"] == "True"
                                      ? viewName + ".Touch"
                                      : viewName;
        ViewEngineResult result = NewFindView(controllerContext, overrideViewName, masterName, useCache);

        // If we're looking for a Touch view and couldn't find it try again without modifying the viewname
        if (overrideViewName.Contains(".Touch") && (result == null || result.View == null))
        {
            result = NewFindView(controllerContext, viewName, masterName, useCache);
        }
        return result;
    }

然后需要将这个新引擎添加到移动引擎引导程序并创建 Touch 视图。

不过，在执行此操作之前，您应该考虑一下您是否希望这样分隔设备。例如，诺基亚 X3-02 的屏幕相对较小，但呈现的视图与 iPad 类似。也许你应该考虑使用设备的操作系统，即Request.Browser["PlatformName"]

最后，51Degrees.mobi Foundation 第 2 版引入了我们自己的设备数据，它使用了与之前不同的功能名称。您可以在 51Degrees.mobi 阅读有关它的 mroe

Answer 2

大多数触摸检测都是使用 Javascript 完成的。或者 CSS。

Modernizr 是一个很好用的库，我认为它默认带有 MVC3。

你会是这样的：

html.touch div {
    width: 480px;
}

html.no-touch div {
    width: auto;
}

检测示例见this

也许你也可以看看MVC4？他们的主要观点之一是更好的移动支持。 Read here。也许默认情况下为良好的触摸检测添加了一些东西