I have been working a lot with MVC sites lately and experimenting with how to make them "usable" on mobile browsers. This post is about the single line of mark-up you can add to your site's Master Page, or in this case your _Layout.cshtml.
Before I get to that line I am going to show you a quick screen shot of a vanilla MVC 3 application, that can be downloaded here.
First, a screen shot of the site running in a desktop browser:
Next, is the site rendered on Windows Phone 7, Android, and iPhone:
The first thing you'll notice is that iOS does a fairly good job adaptively rendering the site. Next you will see that all Windows Phone 7 and Android do is zoom out so the site fits on the device. A site with any significant content or functionality would be almost useless because of the amount of panning and zooming that would be required ... something I'm sure we've all dealt with on our mobile devices. So what can we do to make the site render better in WP7 and Android?
You can actually make quite a bit of progress towards perfect mobile rendering of your site by adding one simple HTML tag.
The meta viewport tag can be used to control how HTML content is displayed in mobile browsers. The meta viewport tag has properties like width, height, minimum-scale, and maximum-scale. In this example the particular property we are concerned with is the width property. You'll want to tell the the browser to render your content width at the width of device.
Let's take a look at what happens when you add the meta viewport tag to the head of the _Layout.cshtml file. Because the meta viewport tag only effects mobile browsers your desktop version will look exactly the same. However, as you can see below, the site looks much better on Windows Phone 7 and Android, and still looks the same on Apple. So by adding that single, simple line of mark-up we were able to give our mobile users a much better user experience.
