The IE Mobile Viewport on Windows Phone 7

[アーティクル]
11/22/2010

One of the main challenges involved with mobile Web development is getting content to lay out correctly on screens of varying sizes. Over the years, browser vendors have invented a variety of ways to allow developers to control how browsers lay out content, usually using a custom <meta> tag.

First among these was the HandheldFriendly tag, used initially by older Palm models as well as browsers like AvantGo, which has the format:

This tag indicates to the browser that the page has been laid out by the developer to be viewable on a small screen, and that the browser should not attempt any further layout enhancements. While somewhat effective, it does not offer any granular control over the layout width – it’s just a true/false flag.

Microsoft addressed this particular problem when it came up with the MobileOptimized tag for the PocketPC:

The MobileOptimized tag allowed the developer to inform the mobile browser of the screen width that the page had been optimized for (in this case 320). While an improvement over the simpler HandheldFriendly tag, it still doesn’t offer much control over the layout, especially for devices that have different screen widths.

Today, most modern mobile Web browsers use the Viewport <meta> tag, which allows Web developers to give explicit instructions to a mobile browser regarding how a page should be laid out and respond to user manipulation. The Viewport tag has the format:

The Viewport tag provides the following settings to allow the developer more fine-tuned control over the content’s layout:

Viewport Property

Width

width

Sets the width of the viewport, in pixels, or the keyword “device-width”, which means whatever the width of the device screen is. The range is from 320 to 10,000.

height

Sets the height of the viewport, in pixels, or the keyword “device-height”. The range is from 480 to 10,000.

user-scalable

Indicates whether or not the user can scale the viewport, or in other words whether or not they can zoom in and out within content. Values can be “yes” or “no”. The default and recommended value is “yes”.

initial-scale

Sets the initial scale of the Viewport*. Allowable values are 0.1 to 10.0

minimum-scale

Sets the minimum allowable scale of the Viewport*. Allowable values are 0.1 to 10.0

maximum-scale

Sets the maximum allowable scale of the Viewport*. Allowable values are 0.1 to 10.0

*Note: In the initial release, IE Mobile for Windows Phone 7 does not support initial-scale, maximum-scale, or minimum-scale.

How Windows Phone 7 Implements “device-width”

The keyword “device-width” is intended to set the width of the Viewport to the width of the device that is viewing the page. On Windows Phone 7, the device width is 480 pixels. However, you will notice that if you set the Viewport width to “device-width”, IE actually sets the width to 320 (and also pins it to 320 if you specify a width of less than 320).

Why does IE do this? We made this decision after a large amount of testing real-world mobile Web sites and learning (to our chagrin) that a very large number of sites out there that were using the “device-width” property were in fact not laid out for the device’s width, but were actually optimized for 320 pixels, probably because the majority of devices available on the market prior to Windows Phone 7 were 320 pixels wide. On many sites, this resulted in an empty strip along the side of the page when viewed in Windows Phone 7, since the sites were often using fixed-width 320px elements like <div> tags.

Faced with the difficult decision of a) shipping a browser on which many common sites didn’t lay out optimally but was technically correct in using device-width, or b) making a slight adjustment to accommodate the many sites that didn’t use device-width properly, we decided to use 320 as the setting for device-width.

In addition, if you use "device-width" and then rotate the screen to landscape, IE Mobile will re-size the Viewport to use the new dimensions. You can choose to re-layout your content by listening for the onResize event and then measuring the new width. For hard-coded numbers, IE Mobile simply scales up the content to fit the screen (which is what most other browsers do).

Default Viewport Widths

Different phone manufacturers have different default widths for the Viewport. The following table lists the known defaults for the current crop of mobile browsers:

Phone Browser

Default Viewport Width

Opera Mobile

850 pixels

iPhone Safari

980 pixels

Android

800 pixels

Windows Phone 7

1024 pixels

Windows Phone 7 Support for META Tags

IE in Windows Phone 7 will recognize all three of these meta tags, and will use the settings of the most modern tag that your page includes. IE will look for and use the settings in the following order:

HandheldFriendly
MobileOptimized (overrides HandheldFriendly)
Viewport (overrides both MobileOptimized and HandheldFriendly)

Summary

The Viewport tag provides a de-facto standard way of exerting much better control over your content’s layout in today’s mobile browsers. Hopefully, this post has been helpful in illustrating how IE Mobile uses the Viewport and in making your Web sites look great on Windows Phone.

Happy Coding!

Joe Marini
Principal Program Manager, Windows Phone
Microsoft Corp.
joemarin@microsoft.com
https://twitter.com/joemarini
https://developer.windowsphone.com

Comments

Anonymous
November 22, 2010
Separating the viewport properties by comma is the preferred way. Hopefully Phone7 will support this as well as the semicolon syntax.
Anonymous
November 22, 2010
Hey guys, thanks for this useful info. It would be nice to see more blog posts on IE Mobile and tell us more about the browser and especially where its going in the future. IE9/Trident 5.0 stuff on a mobile browser would be amazing and you guys may have the opportunity to bring it to the market before Google and Apple.
Anonymous
November 22, 2010
You could follow Android (and our current Webkit trunk implementation) and introduce something similar to the WebKit -webkit-pixel-ratio media feature. On a device with DPI 240, the pixel radio will become 1.5, this means that the device-width will be set as 320 due to the following calculation: width = 480 pixel-ratio = 1.5 (1.5 = 240 / 160; 160 being the DPI on the original iPhone) device-width = 320 (480 / 1.5) Android additionally supports targetDensityDpi in the viewport meta tag, so you could set targetDensityDpi = device-dpi, and the site can then query the pixel-ratio to adapt the CSS. Regarding the ; for separating the tags. This is not supported by WebKit in general, which only supports ,. Unfortunately, ; is kind of wildspread as Android has shipped browsers supporting it. Sites using this includes facebook.com and flickr.com.
Anonymous
November 24, 2010
Shouldn't it be spelled "user-scalable" for compatibility with WebKit, Gecko, and Opera?
Anonymous
November 24, 2010
Matt: yes, our mistake. I've updated the post with the proper spelling.
Anonymous
November 24, 2010
"You can choose to re-layout your content by listening for the onResize event and then measuring the new width." Measure the new width of what? I've checked the width of window, document and body but they all return the same value regardless of orientation. This wouldn't be an issue if window.orientation actually worked.
Anonymous
November 24, 2010
The comment has been removed
Anonymous
November 24, 2010
I have been having trouble with getting the full height of the viewport this should be window.innerHeight which is not supported. Can support be added? or will we have to wait for an IE9 update?
Anonymous
November 27, 2010
How can i enable JavaScript on IE mobile? Seems like either JavaScript is disabled by default or JavaScript support in IE mobile is very limited. Sites like Google Reader are affected immensely. Not sure where the correct forum for this is but figured you can at least point me in the right direction. Keep up the great work on the browser and the OS. I'm extremely satisfied with the user experience :)
Anonymous
November 30, 2010
@Omar: JavaScript is enabled by default. Sites like Google Reader are using features in the browser and DOM that won't be supported until our next update. Glad you're liking the experience!
Anonymous
November 30, 2010
@Anthony: yes, for now use screen.height. We're looking at supporting more properties in the next update.
Anonymous
November 30, 2010
Kamram: Try replacing "value" with "content" in your meta tag.
Anonymous
December 08, 2010
I'm having a problem where the viewport width is affecting how some elements of my page are zoomed, but not all. This results in some parts of the page being very small while others are large, even though they all have a fixed font-size of 16px. Any one else ever have this issue?
Anonymous
December 09, 2010
This wasn't working for me in the emulator and a couple of devices, but found using commas instead of semicolons as the separator does work. Are you sure it should have commas in the example?
Anonymous
December 10, 2010
@Greg: Let me check and see. If it's wrong we will update the examples.
Anonymous
February 24, 2011
Even I am not able to Zoom in and Zoom out with the following viewport. <meta name="Viewport" content="width=320; user-scalable=yes; initial-scale=1.0" /> Tried to change semicolons with comma as @greg said above. I'm using WP7 emulator.
Anonymous
February 27, 2011
iOS Safari doesnt support ; (it supports parsing numbers with garbage though, The ; in "1;" is thus considered garbage and ignored). Android also recently removed the support for ;
Anonymous
March 03, 2011
I reached this article, because I saw the following behavior in Internet Explorer Mobile - Samsung Windows Phone 7: I have this log-in page, with two html inputs: text and password - when touching any of them to input text, the browser would perform an automatic zoom-in over the control. I was asked to prevent that behavior... So, just so you know - this worked for me: <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no;"> Thank you.
Anonymous
April 06, 2011
@Ravi just remove the viewport tag makes the emulate/device supporting zoom @Greg you are right,comma works another question: content="width=320" or content="width=1024" makes no differences on either emulator or device ?

次の方法で共有