There have been several good posts on how to style sites for mobile devices, including Responsive Web Design, Bulletproof CSS3 media queries, CSS Media Query for Mobile is Fool’s Gold, and Combining media queries and JavaScript, to name a few.
These approaches all use CSS3 Media Queries. As many of these articles point out, not all mobile browsers support this feature. The Windows Phone 7 browser’s base functionality is built on Internet Explorer, which will not support CSS3 Media Queries until Internet Explorer 9. As we announced at Mobile World Congress, Internet Explorer 9 will be coming to Windows Phone this year, so we’ll have much more to say about CSS3 Media Queries support on the phone soon. This post addresses how developers can achieve similar results on the current Windows Phone 7 browser in a way that will also be compatible with future updates.
The browser team’s primary goal in the initial release of Windows Phone 7 was to ensure that any site designed for Internet Explorer would render correctly on Windows Phone 7, and then to add optimizations where we could to enable mobile scenarios. Some examples of these additional features can be seen in Joe Marini’s post, JavaScript and CSS changes in IE Mobile for Windows Phone 7.
Getting reacquainted with an old friend: IE Conditional Comments
Conditional Comments have been part of Internet Explorer since version 5. They enable developers to include or exclude lines in the HTML document based on a feature’s existence or version. On Windows Phone 7 we added an “IEMobile” feature. Its version information matches the mobile token in our user agent string, as introduced in another of Joe’s posts, Ladies and Gentlemen, Please Welcome… the IE Mobile User Agent String!:
<!–[if IEMobile]>
<p>Welcome to Internet Explorer Mobile.</p>
<![endif]—>
<![if !IEMobile]>
<p>All other browsers</p>
<![endif]>
The first block will display “Welcome to Internet Explorer Mobile” only on Windows Phone 7 devices. The second block will display “All other browsers” on Internet Explorer, Firefox, WebKit, or Opera. This is because the second block is a downlevel-revealed comment, instead of the more common downlevel-hidden type. More information about downlevel comments is available on MSDN.
In the example above, the conditional comments surround HTML content. While it’s possible to use conditional comments on HTML, script, or CSS, the remainder of this post will focus on the CSS case.
Mixing it up with queries and comments
Add these lines to your mobile style sheet to add Windows Phone 7 support to your site:
<!—Mobile (including IE9 on Windows Phone)–>
<link rel=”stylesheet” type=”text/css” href=”mobile.css” media=”screen and (max-device-width: 480px)” />
<!–[if IEMobile 7]>
<link rel=”stylesheet” type=”text/css” href=”mobile.css” media=”screen” />
<![endif]–>
A caveat to this method is that some of your mobile WebKit CSS might not work on Internet Explorer, and may need to be tweaked. Also, this method doesn’t provide a mechanism to support import style media queries (like the one shown below), since conditional comments are only supported in the HTML markup, not in CSS files.
@media screen and (max-device-width: 480px) { div {border:none;}}
One advantage of this approach is that unlike media queries, which download all referenced style sheets even if the criteria aren’t met, conditional comments are part of the parsing stage and anything excluded from parsing won’t be downloaded later.
Adding a conditional comment for Windows Phone 7 to a solution—such as the one proposed in Bulletproof CSS3 media queries—would enable you to target WebKit-based smartphone browsers, Windows Phone 7, and a large range of desktop browsers.
Mike O’Malley
Program Manager
Windows Phone