How do I detect a touch screen mobile device using 51degrees.mobi

Question

I am using the MobileViewEngines describe here by Scott Hanselman, and the 51Degrees.mobi browser database to render different views for mobile and desktop browsers.

I now want to add a middle ground. For High-End mobile browsers (apple, android, windows phone, some blackberry etc). I am thinking of using the Touch screen to differentiate this category.

So, two questions:

1. How do I Detect the Touch Screen using 51Degrees.mobi?
2. Is the touch input a good way to go about it? (I need the desktop, high-end, low-end categories)

Answer 1

I work at 51Degrees.mobi. You can detect if a device is a touch screen using Request.Browser["IsTouchScreen"]

However, using that elegantly within MVC is a bit more involved. From looking at the source of MobileCapableViewEngine it seems like you can make a new engine by copying the mobile engine and changing the FindView method:

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;
    }

This new engine will then need to be added to the mobile engines boot strapper and create Touch views.

Before doing this though, you should think about if this is how you want to separate devices. For instance, the Nokia X3-02 has a comparatively small screen but would be presented with same view as something like an iPad. Perhaps you should consider using the OS of the device, ie Request.Browser["PlatformName"]

Finally, 51Degrees.mobi Foundation version 2 introduces our own device data that uses different capability names from the previous one. You can read mroe about it at 51Degrees.mobi

Answer 2

Most touch detection is done with Javascript. Or alternatively CSS.

Modernizr is a good library to use, and I think it comes with MVC3 by default.

You would so something like this:

html.touch div {
    width: 480px;
}

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

For detection examples, see this

Maybe you can look into MVC4 too? One of their main point is better mobile support. Read here. Maybe that has something added for good touch detection by default