6

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)
neeKo
  • 4,280
  • 23
  • 31

2 Answers2

10

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.

keyboardP
  • 68,824
  • 13
  • 156
  • 205
  • Thank you for the quick answer! However, changing to IEMobile 9 still doesn't work. I was also under the impression that '7' represented the WP7, do you think it represents a browser version? Would make more sense, yes :) – neeKo Jan 09 '12 at 01:10
  • 1
    I made a mistake in the previous answer, there should be no '9', just `[if IEMobile]`. Try the new version. The 7 is just a coincidence :) It represents IE7, not WP7. There are also versions for 6 and 8. – keyboardP Jan 09 '12 at 01:11
  • Thanks again, however this also didn't work - it was described in the problem. I've put in an edit, maybe that helps? – neeKo Jan 09 '12 at 01:16
  • I've replaced the CSS with Javascript for detection. Maybe that helps. – keyboardP Jan 09 '12 at 01:28
  • it's WPDesktop now in wp8. I spent two hours trying to follow instructions on html conditionals how to do it - none of those methods work now. so everyone, just detect via js.. the method on css tricks etc does simply not work anymore. – Lassi Kinnunen Nov 07 '13 at 10:41
0

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.

JonHiggens
  • 143
  • 1
  • 1
  • 7