Simulate a Mobile Browser using Chrome

When I first started down the road of mobile Web development, I asked around, Googled, and found some wacky, some nice mobile browser simulators that various enterprising individuals slapped together.  Then I discovered that the easiest way to simulate a mobile browser was right in front of my face.  If you already use Chrome, you're just a step away.  All you need to do is override the "User Agent" to instruct the browser to use an agent specific to a device, either by selecting it from a list, or entering the user agent string directly.  Steps:

0. Get Chrome if you don't already have it

1. Click the wrench icon on the top right

2. Goto Tools -> Developer Tools

3. Click the gear icon on the bottom right

4. Find the setting "Override User Agent", check it, and select the browser/device you want to emulate

5. Refresh your page and inspect it.  This is how it will look on the device you chose.  (You'll have to re-size the browser to a phone-ish size if you've selected a mobile phone device)

Don't see the user agent string you're looking for in the list?  Look here (http://www.useragentstring.com/pages/useragentstring.php) for an extensive list of user agent strings you can copy and paste into the free-form textbox.

Instant MVC 3 Mobile App

Have you been pondering getting into mobile development, but have been procrastinating, and making excuses to yourself about how little time you'll have to devote to it, the steep learning curve, etc?  Yeah, me too.  That is, until I found the simple but awesome "Mobile Ready HTML5" template using Visual Studio Extension manager.  Its a fully functioning MVC 3 application template that is "mobile ready" out of the box, and allows you to easily create your own mobile views for a new or existing MVC 3 app.

The elegant key to its functionality is the subclassing of the System.Web.Mvc.RazorViewEngine, overriding the "FindView" method (Figure 1), and deciding on which View to serve up based on the browser type.  This prevents having to change any code in your controllers, keeping things clean.

Figure 1

using System.Web.Mvc;

namespace Web
{
    class MobileViewEngine : RazorViewEngine
    {
        public override ViewEngineResult FindView(ControllerContext controllerContext, string viewName, string masterName, bool useCache)
        {
            ViewEngineResult result = null;
            var request = controllerContext.HttpContext.Request;

            //Determine if this is a mobile browser
            //IsSupportedMobileDevice is an extension method which queries the UserAgent
            if (request.IsSupportedMobileDevice() && ApplicationHelper.HasMobileSpecificViews)
            {
                //Get mobile view
                string viewPathAndName = ApplicationHelper.MobileViewsDirectoryName + viewName;
                result = base.FindView(controllerContext, viewPathAndName, masterName, true);
                if (result == null || result.View == null)
                {
                    result = base.FindView(controllerContext, viewPathAndName, masterName, false);
                }
            }
            else
            {
                result = base.FindView(controllerContext, viewName, masterName, useCache);
            }
            return result;
        }
    }
}

To create your mobile views, you'll simply need to create a folder called "Mobile" (or anything else, as it's configurable) under the existing Views folder, like so:

It's all downhill from there. I made a couple changes and additions to the UserAgent check, but aside from that, this template will have you up and running with an MVC 3 mobile app in no time.

To get it from Visual Studio:
1. Open extension manager from Tools/Extension Manager
2. Goto Online Gallery, and search for "Mobile Ready HTML5"
3. Click Download.

To get it from a browser:
Go here: http://visualstudiogallery.msdn.microsoft.com/9df9c61c-4d90-43e5-9aa1-a58786b7a1e4.

Thanks to Sammy Ageil for putting this together.  He's got some more details and instructions on his site: http://www.sammyageil.com.