CSS to target Windows Phone 7

Question

I'm trying to add a .css file that targets Windows Mobile, and as media="handheld" does nothing for this device I've followed instructions from an official Windows Phone site , which sum up to this:

<!--[if IEMobile 7]>
<p>Welcome to Internet Explorer Mobile.</p>
<![endif]-->
<![if !IEMobile 7]>
<p>All other browsers</p>
<![endif]>

The Problem

As expected, in Firefox and desktop version of Internet Explorer this displays what it should: "All other browsers".

Unfortunately, my Windows Phone 7 also displays "All other browsers" . I tried with and without "7" in the conditional comment, same result.

There is nothing else in my .html that could be causing problems, because I'm testing on this:

<html>
    <body>
        <p>Does work</p>
        <!--[if IEMobile 7]>
            <p>Welcome to Internet Explorer Mobile.</p>
        <![endif]-->
        <![if !IEMobile 7]>
            <p>All other browsers</p>
        <![endif]>
    </body>
</html>

The online version of this is temporarily here .

I copy pasted the code from the official site, and my Internet Explorer settings on WP7 specifies Mobile Version as preferred version. I also have that Mango update.

In an perishablepress.com article I've read that specifying media="Screen" (capitalizing the S) on a normal, non-handheld stylesheet declaration will force WP7 to use the media="handheld" declaration, however this didn't work for me.

Question

Does anyone have experience with targeting WP7 with a .css? If yes, what is your solution?

Bear in mind that I'm really looking for how to make WP7 select a mobile version of the .css, not how to solve the conditional comment problem. Thank you for your time!

Edit

I've added a javascript ( thank you w3schools.com ) to ask for the browser information (with 'navigator'), this is what I get for my device (Samsung Omnia, btw):

Does work
All other browsers
Browser CodeName: Mozilla
Browser Name: Microsoft Internet Explorer
Browser Version: 5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; SAMSUNG; OMNIA7)
Cookies Enabled: true
Platform: Win32
User-agent header: Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; SAMSUNG; OMNIA7)

Answer 1

Mango runs IE9, not IE7. Your check says, if not IEMobile 7, display 'All other browsers' . Since the browser is IE9, All other browsers is displayed.

Edit - You could try using Javascript to detect it. I adapted this code from here .

browserUA = navigator.userAgent.toLowerCase();
if (browserUA.search('windows phone os 7') > -1)
   //windows phone therefore load WP CSS file
else
   //it's some other browser

Of course, user-agents can be changed easily so don't use this method for security reasons. However, for Windows Phone detection, it should work.

Answer 2

You're using Mango (Windows Phone 7.5), not Windows Phone 7, so checking IE Mobile 7 won't work for a Mango phone. I believe the article on the Windows Phone site was was written before Mango, and they're being more specific than they need to be.

You should just check for IEMobile, not IEMobile 7.

CSS to target Windows Phone 7

Question

The Problem

Question

Edit

2 answers

solution1
10 ACCPTED 2012-01-09 01:02:29

solution2
0 2012-02-16 00:47:32

CSS to target Windows Phone 7

Question

The Problem

Question

Edit

2 answers

solution1 10 ACCPTED 2012-01-09 01:02:29

solution2 0 2012-02-16 00:47:32

solution1
10 ACCPTED 2012-01-09 01:02:29

solution2
0 2012-02-16 00:47:32