Silverlight for Windows Phone Programming Tip #8

One of the remarkable aspects of Windows Phone 7’s WebBrowser control is that you can build an entire Web site in isolated storage, point the WebBrowser control to it, and view the Web site on your phone. Once IE for Windows phones comes to support HTML5 (and that day can’t come soon enough, IMHO), this, I believe, will be a useful mechanism for packaging HTML5 apps so that they look and feel like native phone apps. Even now, using a WebBrowser control as a window into local HTML content provides a way to deploy HTML-based help systems to the phone. And I’m sure there are other uses for it that I haven’t thought of.

To demonstrate how to use WebBrowser to view locally stored content, I built a sample site in HTML and wrote the pages, images, and style sheets into isolated storage. Relative links allow the user to navigate among the pages. The home page looks like this:

Here’s the HTML source for the page:

<html>

<head>

</head>

<body>

<h1>BVM BobCat</h1>

<p>Nullam fermentum tincidunt neque in fringilla...</p>

</body>

</html>

Notice the META element. It’s something you’ll almost invariably need if you build HTML content for Windows phones. If you remove the element, the page renders this way on the phone:

The META element provides a hint of sorts informing the WebBrowser control what the “native” width of the page is. I set it to 480, which is the width of the screen and the width of the image at the top of the page. With this element in place, the WebBrowser control happily sets the initial zoom level so that the page fills the width of the screen. Furthermore, the user-scalable=yes attribute indicates that the user should be able to zoom in and out using pinch gestures. To prevent users from zooming in and out, you can set this attribute to no.

There’s nothing complicated about <meta name=”viewport” content=”…” />, but if you don’t know that it exists, life with HTML on a Windows phone is measurably less pleasant.

Jeff Prosise