title: CSS to target Windows Phone 7
body: <p>I'm trying to add a .css file that targets Windows Mobile, and as <code>media="handheld"</code> does nothing for this device I've followed instructions from <a href="http://windowsteamblog.com/windows_phone/b/wpdev/archive/2011/03/22/targeting-mobile-optimized-css-at-windows-phone-7.aspx">an official Windows Phone site</a>, which sum up to this:</p>
  
  <pre><code>&lt;!--[if IEMobile 7]&gt;
  &lt;p&gt;Welcome to Internet Explorer Mobile.&lt;/p&gt;
  &lt;![endif]--&gt;
  &lt;![if !IEMobile 7]&gt;
  &lt;p&gt;All other browsers&lt;/p&gt;
  &lt;![endif]&gt;
  </code></pre>
  
  <hr>
  
  <h1>The Problem</h1>
  
  <p>As expected, in Firefox and desktop version of Internet Explorer this displays what it should: "All other browsers".</p>
  
  <p>Unfortunately, my <strong>Windows Phone 7 also displays "All other browsers"</strong>. I tried with and without "7" in the conditional comment, same result.</p>
  
  <p>There is nothing else in my .html that could be causing problems, because I'm testing on this:</p>
  
  <pre><code>&lt;html&gt;
      &lt;body&gt;
          &lt;p&gt;Does work&lt;/p&gt;
          &lt;!--[if IEMobile 7]&gt;
              &lt;p&gt;Welcome to Internet Explorer Mobile.&lt;/p&gt;
          &lt;![endif]--&gt;
          &lt;![if !IEMobile 7]&gt;
              &lt;p&gt;All other browsers&lt;/p&gt;
          &lt;![endif]&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The online version of this is temporarily <a href="http://www.neeko.info/ergonomija/ie.html">here</a>.</p>
  
  <p>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 <em>Mango</em> update.</p>
  
  <p>In an <a href="http://perishablepress.com/press/2009/08/02/the-5-minute-css-mobile-makeover/">perishablepress.com</a> article I've read that specifying <code>media="Screen"</code> (capitalizing the S) on a normal, non-handheld stylesheet declaration will force WP7 to use the <code>media="handheld"</code> declaration, however this didn't work for me.</p>
  
  <hr>
  
  <h1>Question</h1>
  
  <p>Does anyone have experience with targeting WP7 with a .css? If yes, what is your solution?</p>
  
  <p>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!</p>
  
  <h2>Edit</h2>
  
  <p>I've added a javascript (<a href="http://www.w3schools.com/js/js_browser.asp">thank you w3schools.com</a>) to ask for the browser information (with 'navigator'), this is what I get for my device (Samsung Omnia, btw):</p>
  
  <pre><code>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)
  </code></pre>