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