Using Media Queries on Windows Phone

by Curtiss   |   last updated April 9, 2013   |   CSS Tutorials ·

More than likely, you probably haven’t noticed, but Windows Phone 7 devices don’t fully support media queries (used mostly for responsive and adaptive designs). However, media queries can be used for designs presented on Windows Phone, you just have to know how to do it.

For the most part, I have seen designers and developers include media queries within their stylesheet(s). Windows Phone 7 will ignore media queries directly in your CSS. Instead, you have to set up separate stylesheets for each media query. For instance, rather than having the following code in your main stylesheet:

@media screen and (max-width:640px) { header { background: #f00; } footer { background: #00f; } }

You need to separate those style definitions out to a separate stylesheet. Then, use the media query within the <link> element that calls that stylesheet. That <link> element would look something like:

<link rel="stylesheet" href="style-640.css" media="screen and (640px)"/>

Then, your stylesheet would just have the following code inside of it:

 header { background: #f00; } footer { background: #00f; } 

Pros and Cons

There are definitely pros and cons to loading separate stylesheets for various media queries as opposed to including all of your rules within a single stylesheet. Following are some of the items you may want to consider:

1. Pro: Compatible with a few more devices
2. Pro: Only applicable data are loaded on page load. After all, very few of your visitors are actually going to be stretching their browser size back and forth to see how your site adapts to different widths/heights, so, if they’re visiting with a screen that has a maximum width of 640px, there’s no reason to load the style definitions for screens with widths up to 960px or 1024px, etc. If you have a large amount of definitions in the stylesheet, this could bog down your page weight unnecessarily.
3. Pro: Your CSS doesn’t need to be quite so complicated. When you’re building multiple media queries, they can tend to overlap a bit, meaning that the definitions within each query needs to be a little more specific than the last. Yes, you can get around this by making your media queries more specific. It’s slightly simpler to manage these definitions when they’re in separate stylesheets that are only loaded when needed.
4. Con: More HTTP requests. Each stylesheet is a separate request to your server, so it might take slightly longer to load (depending on the size and complexity of your stylesheets)
5. Con: Jumpy response. If you do change browser sizes, your browser will first disable the previous stylesheet (which defaults back to the main stylesheet only), then will load the newly applicable stylesheet. The changes are a good bit smoother when all of the definitions are within a single stylesheet.

Targeting IE

If you decide that the cons outweigh the pros, you can target IE specifically, allowing all other browsers to use the comprehensive stylesheet. To accomplish this, you would simply use conditional IE comments. You can simply target any version of IE by using a simple conditional comment like:

 <!--[if IE]> <link rel="stylesheet" href="style-640.css" media="screen (and max-width:640px)"/> <![endif]-->

I’ve been told (though I haven’t yet tested) that you can use conditional comments to specifically target IEMobile. That would look like:

 <!--[if IEMobile]> <link rel="stylesheet" href="style-640.css" media="screen (and max-width:640px)"/> <![endif]-->

Implementing This Method in WordPress

Finally, if you’d like to set something like this up in your WordPress theme, you can do so pretty easily. One of the parameters accepted by the wp_enqueue_style()/wp_register_style() functions is the “media” for the stylesheet. Most people use this simply to specify whether the stylesheet should apply to “all”, “screen”, “print”, etc.; but that’s the same place you can put in the query. That call would look something like:

wp_register_style( 'max-width-640', get_bloginfo( 'stylesheet_directory' ) . '/style-640.css', array(), '0.1', 'screen and (max-width:640px)' );

If you would then like to set that up so that it only gets called for IEMobile, if you’re using the wp_register_style() method, you can tell WordPress to wrap a stylesheet’s <link> tag within conditional comments. To do that, you would use the add_data() method for the $wp_styles object. That code would look something like:

global $wp_styles;
wp_register_style( 'max-width-640', get_bloginfo( 'stylesheet_directory' ) . '/style-640.css', array(), '0.1', 'screen and (max-width:640px)' ); $wp_styles->add_data( 'max-width-640', 'conditional', 'IEMobile' );