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 “html.no-fontface” 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.

Thanks,
Ben

What you probably want is text-size-adjust,

I use normalize: http://necolas.github.com/normalize.css/


/* =============================================================================
Base
========================================================================== */

/*
* 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
* http://clagnut.com/blog/348/#c790
* 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
*/

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