Managing the browser viewport in Windows Phone 7

As web browsing on mobile devices continues to grow, having sites that are designed to be used on phone and that match the look and feel of other applications on the device becomes more important every day. 

In this post I would like to expand on what Joe wrote a few months ago about the mobile viewport support on Windows Phone , but before getting started though I would like to introduce myself; My name is Jorge Peraza and I’m a Program Manager on the Windows Phone Browser team and I’m happy to come back as an active blogger now on the IE Mobile’s team blog.

Between Screens, Windows and Viewports…

Once upon a time, when browsers only lived on desktop computers, the web content “canvas” (a.k.a. the area on the screen that the web site can draw things on) was tied nicely with the size of the browser window which is convenient, predictable and works very well.  Then the rich mobile browsers grew in functionality to the point where the same sites could be displayed on the mobile screen as well… unfortunately for us that old model did not work really well since phone screens generally have a smaller pixel count and are primarily held in portrait.  The end result was that the layout of a number of sites was “compressed” as you can see here:

cats

The solution was to decouple the “canvas” from the window into a “Layout viewport” used to for all layout calculations and the “Visual viewport” used to represent the visible portion of the site.

PPK has a very interesting post on this topic for more details.

Controlling the viewport

On Windows Phone 7 all sites, by default, have a layout viewport of 1024 pixels wide; the browser then selects the appropriate zoom level that is needed so the layout viewport fits horizontally the screen before rendering any content.  This is what gives the user a “thumbnail” view of the website when it is initial loaded.

Developers and designers have control over the layout viewport width by utilizing a special META tag called  viewport.  If this tag is present the browser will assume the content is optimized for mobile so it will also disable all the optimization the browser makes to enhance the readability of desktop sites,  this means that the content will be rendered exactly as specified by the markup.

Note: The height of the document is always calculated based on the phone orientation and the desired viewport width so it is at least a tall as the visual viewport.

Now, lets dig in into the details on how this tag works on WP7.  First lest create an HTML document with four rectangles of different sizes as follows:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Viewport Test</title>
<style type="text/css">
.auto-style1 {
    font-size: large;
    color:white;
}
</style>
</head>

<body>
<div style="position:absolute;top:0px;left:0px;width:1024px;height:1024px;background-color:gray">
    <p style="text-align:right" class="auto-style1">1024px</p>
</div>
<div style="position:absolute;top:0px;left:0px;width:480px;height:480px;background-color:green">
    <p style="text-align:right" class="auto-style1">480px</p>
</div>
<div style="position:absolute;top:0px;left:0px;width:320px;height:320px;background-color:maroon">
    <p style="text-align:right" class="auto-style1">320px</p>
</div>
<div style="position:absolute;top:0px;left:0px;width:240px;height:240px;background-color:navy">
    <p style="text-align:right" class="auto-style1">240px</p>
</div>
</body>

</html>

This document when loaded on Windows Phone 7 will look like this:

1024

Specifying a constant viewport size

When your site is designed for a specific viewport width, having a hard-coded value on the viewport tag will always produce the expected behavior independently of which device or screen orientation used to access it.  The browser will adjust the initial zoom factor so the content is fit to the specific device visual viewport.

For example, on the example site if we use:

 <meta name="viewport" content="width=320" />

The site will look like this on portrait:

320

And, after rotating the device to landscape, the content is zoomed-in to allow the viewport width to remain constant:

320_landscape

but if we change the tag to be:

 <meta name="viewport" content="width=480" />

The page will instead look like this:

480

Dynamic viewport sizing

To allow IE to select the viewport size you can use the special value ‘device-width’.  This value tells the browser that the site is designed to handle multiple resolutions and will be ready to change its layout on the fly as a result of orientation changes. 

Internally Windows Phone 7 will resolve device-width to  320px when on portrait and 480px on landscape.  Those values were chosen because the majority of mobile web sites currently deployed were not ready to scale to the higher DPI screens we use on our phones which will the experience for our end users less than ideal.  This is consistent with how other platforms are doing this today though I would encourage all web developers to only use dynamic sizing if their site can scale to different device configurations.

Lets put this to practice now by modifying the viewport META tag to use dynamic sizing

 <meta name="viewport" content="width=device-width" />

And then load it on Windows Phone:

320

And after rotating the screen we the document gets resized as expected:

ls

Alternative ways for changing the size of the viewport

Windows Phone 7 will also automatically resize the layout viewport if it determines that the content would be better rendered as a mobile optimized page. This include sites that use the XHTML Mobile profile, use the MobileOptimized or the HandheldFriendly META tags.

As always, any feedback is appreciated and also, please let us know if there are any topics you would like us to cover on the near future = ]

Jorge