I have been working a lot with MVC sites lately and experimenting with how to make them *usable* on mobile browsers. This is post is about the single line of mark-up you can add to your sites 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 is a screen shot of the site running in a desktop browser.
Next, is the site rendered on Windows Phone 7, Android, and iPhone.
Windows Phone 7
Opera Mobile (Android)
The first thing you notice is that iOS does a fairly good job adaptively rendering the site, damn Apple! Next you will notice that all WP7 and Android do is zoom out so the site fits on the device. A site of any significant content or functionality would be almost useless because of the amount of panning and zooming that would be required. I am sure we have all dealt with sites on our mobile devices like that. So what can we do to make the site render better in WP7 and Android?
You can actually get a long way 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. We want to tell the the browser to render our content width at the width of device.
Let’s see what happens when we add that tag to the head of our _Layout.cshtml file
As you can see above, because the meta viewport tag only effects mobile browsers our desktop version looks exactly the same. Let’s check on the mobile browsers.
The site looks much better on Windows Phone 7 and Android, and still looks the same in Apple. So by adding that single line of mark-up we where able to give our mobile users a much better user experience.
Stay tuned for a future post on using CSS Media Queries to improve the mobile experience even further.
Keith Burnell is a Microsoft web MVP and Senior Software Engineer with Skyline Technologies and president of the Fox Valley .Net User Group. Keith has been developing software for over 10 years specializing in large scale ASP.NET and ASP.NET MVC web site development and architecture
The opinions expressed herein are my own personal opinions and do not represent
my employer's view in any way.