Targeting mobile-optimized CSS at Windows Phone 7

Targeting mobile-optimized CSS at Windows Phone 7

  • Comments 4
  • Likes

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

4 Comments
You must be logged in to comment. Sign in or Join Now
  • Hello, i have a Little big problem with my website, because when i tested in my Samsung Onmia W , with Windows Phone 7.10.8773.98, the page do nothing, but when i tested in a laptop, pc, the website it's showed well "Responsive", the size of the screen changed well, but in my wp don´t, I know that IE not support media querys, and i was Tried to fix the problem, so mean while do not work well, thanks if someone can helpme, this is the URL: arbelaezgroup.com, thanks and bye bye.

  • hongzy
    1 Posts

    The <a href="http://www.louisvuittonusa-2012.net">Louis Vuitton USA</a> for online clients is tough. Getting on the lead in marketing is crucial to keep up with customers. Building an email list is the key to ensure the expansion of your business. This is the life of people engaged in online marketing. With huge and responsive people in your email list, your earnings will reach its highest potential

  • clq
    1 Posts

    There is no denying the very fact that our Louis Vuitton luggage play a additional and additional vital role in market. despite what vogue bag, our store all will offer you satisfactory provide. And open our web site homepage you'll see lots of our Louis Vuitton Sale show on here. just like the Louis Vuitton Caps and Louis Vuitton Shoes, these product are the best-selling product in our <a href="http://www.louisvuittonoutletstore-2012.com">Louis Vuitton Outlet Store</a> currently, and that they are all from the superb style and adapt to the popular trend. several youth prefer to our look to shop for our product, that’s as a result of we tend to are give heat perspective for every client. If you're intereated in and need to shop for our product, please return to our <a href="http://www.louisvuittonoutletstore-2012.com">Louis Vuitton Outlet Online</a> store. we tend to are the simplest one.

  • Aethec
    6 Posts

    You forgot some -'s in the code.