em-based Media Queries issue...

em-based-mq-issue.css

/*  EM BASED MQ-ISSUE?
    in html: <meta name="viewport" content="initial-scale=1.0, width=device-width"/>
*/

/*  Why does the following MQ not apply on my iPhone 3GS?!
    PS: I *know* this is, strictly speaking, not a test for an iPhone.
    That just happens to be my current test-device ;) 
    PS: if I check with JS: window.width == '480px' :/ */
*/

/* 1em = 20px */ 
html { font-size: 125%; }

/* This does NOT trigger */
@media only screen and ( max-width: 24em ) { body:after { content: 'iPhone LS'; } }

/* This DOES trigger! */
@media only screen and ( max-width: 480px ) { body:after { content: 'iPhone LS'; } }