SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member bbonora's Avatar
    Join Date
    Mar 2006
    Location
    Seattle, WA
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:
    Code:
    h2 {
      font-size: 26px;
    }
    html.iem h2 {
      font-size: 12px;
    }
    And the head section of my template would look something like this:

    Code:
    <!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

  2. #2
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  3. #3
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    I use normalize: http://necolas.github.com/normalize.css/

    Code:
    /* =============================================================================
    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 */
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •