Managing the Windows Phone Browser Viewport

Managing the Windows Phone Browser Viewport

  • Comments 6
  • Likes

Welcome to a new series of posts written for web developers who target the Windows Phone platform.  We will start with topics that are relevant to IE7 though we understand the excitement about IE9 and will be sharing more information about it soon. Your feedback on this blog would be appreciated. Let us know if there are web development topics you’d like us to cover in future posts.

As web browsing on mobile devices continues to grow in popularity, it’s more important than ever to design mobile web sites that match the look and feel of native applications. One of the features provided by the browser in Windows Phone that helps with this task is programmatic control over the browser layout viewport.

Screens, windows, and viewports…

Once upon a time, when browsers only lived on desktop computers, the web content canvas (the area on the screen that the web site can draw things on) was tied in nicely with the size of the browser window. This was convenient, predictable, and works very well. Then rich mobile browsers grew in functionality to the point where the same sites could be displayed on the mobile screen. Unfortunately, the desktop model didn’t work very well because phone screens generally have fewer pixels than desktop monitors and are most often held in portrait orientation. The result was that the layout of many sites was compressed horizontally on mobile browsers, as you can see here:

cats

Windows Phone 7 decoupled this canvas from the window creating two different viewport concepts. The first one is used during layout and it is independent of the browser window size and screen resolution and the second one that represents the visible portion of the page that is device and application specific. For more information about this concept, see this posting by Peter-Paul Koch.

Controlling the viewport

On Windows Phone 7, all web sites have a default layout viewport width of 1,024 pixels. Before rendering any content, the browser sets the zoom level so that the layout viewport fits horizontally on the screen. This is what gives the user a thumbnail view of the website when it initially loads.

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

Note: The height of the document in a mobile browser is always calculated based on the phone’s orientation and the desired viewport width, so the page is at least a tall as the visual viewport.

Now, we’ll dig in into the details on how this tag works on Windows Phone 7. First, we’ll create an HTML document with four rectangles of different sizes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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>

When loaded on Windows Phone 7, the document 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, independent of device or screen orientation. The browser will adjust the initial zoom factor so that the content fits the device’s visual viewport.

For example, on the example site, if we use:

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

The site will look like this in portrait orientation:

320

After rotating the device to landscape orientation, the content is zoomed-in so that the viewport width remains constant:

320_landscape

But, if we change the tag to:

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

The page will instead look like this:

480

Dynamic viewport sizing

You can use the special value ‘device-width’ to enable Internet Explorer to select the viewport size. This value tells the browser that the site is designed to handle multiple resolutions. The result is that the browser will be ready to change its layout on the fly if there are orientation changes.

Internally, Windows Phone 7 will resolve device-width to 320px when in portrait orientation, and to 480px in landscape orientation. Those values were chosen when Windows Phone 7 launched because the majority of mobile web sites at that time weren’t ready to scale to the higher DPI screens we use on our phones, and so would have provided a less-than-ideal experience for our users. This is consistent with how other platforms are doing this, although I would encourage all web developers to use dynamic sizing only if their sites can scale to different device configurations.

We’ll put this knowledge to use 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

After rotating the screen, we see that the document has been resized as expected:

ls

Alternative ways to change the size of the viewport

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

Jorge Peraza

Program Manager

Windows Phone Browser Team

6 Comments
You must be logged in to comment. Sign in or Join Now
  • What are the cons if I set my viewport to 480? Are there any impact on other devices such as Android or iPhone? Will they look bigger or smaller?

  • Hi, I would like to create a sticky footer, so that when you load the page there is a footer always above the url bar. Then when you rotate the screen, the footer stays above the url bar. I have got quite close using the information supplied in this blog post, but whenever I rotate my phone, the footer get's hidden behind the url bar. Seems when in portrait mode, the viewport knows to take into account the url bar, but when in landscape mode it doesn't subtract it from the device height.

  • Hi, Jorge:  Thanks a lot for the excellent post.  Does WP7 supports overriding the device-width value?  Our app is a Web App supporting both portrait and landscape mode.  We would like to utilize every pixel -- i.e. width = 480 in portrait mode and 768 in landscape mode. Our app automatically redoes the layout in JavaScript when the resize event is triggered.  However we have the dilemma here -- if we fixed the viewport in our index.html (<meta name="viewport" content="user-scalable=no, width=480">) we get a beautifully rendered portrait page but the resize is never trigger when orientation changed.  If we use width=device-width then rotation works fine, but our app looks very ugly.  Any suggestion would be welcome.

    Thanks,

    Willie

  • hedgehogjim - IE7 supports "user-scalable" as well.

  • DrPizza
    3 Posts

    Is there no way to actually target the phone's real dimensions? I can't see how lying about device-width is helpful in the long run.

  • In addition to the width value, does WP7 also support the scale-based values supported by iOS/Android (minimum-scale, maximum-scale, initial-scale, user-scalable)? What about Android's target-densitydpi as it does a pretty good job of scaling images across differing screen resolutions?

    I guess this is a long way of asking .. what other viewport meta-tag content values does WP7 support? :-)

    Thanks,

    Jim