Windows Phone 7.5 IE Mobile Browser Detection

Hello All,

I’m trying to figure out a way to display a different styles when the user agent is IE mobile. My site uses @font-face which doesn’t display properly on my Windows Phone 7. I have a font stack setup but the font size is still way too big when it defaults to one of the system fonts. Ideally, I would like to do something like this in my style sheet:

h2 {
  font-size: 26px;
html.iem h2 {
  font-size: 12px;

And the head section of my template would look something like this:

<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if IEMobile]><html lang="en" class="no-js iem"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head> ...

My site also has modernizer installed but the “” isn’t working which makes me think that modernizer is interpreting IE mobile as being font-face capable. Any help on the subject would be much appreciated.


What you probably want is text-size-adjust,

I use normalize:

/* =============================================================================
========================================================================== */

* 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Prevents iOS text size adjust after orientation change, without disabling user zoom

html {
    font-size: 100%; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */