Context not called back for small layouts

[thany]

HTML:

<link href="style.css" rel="stylesheet" media="screen">
<link href="mobile.css" rel="stylesheet" media="screen and (max-width:960px)">

style.css:

html {font-family:desktop;}
* html {font-family:desktop;}
* + html {font-family:desktop;}

mobile.css:

html {font-family:medium;}

@media (max-width: 640px) {
  html {font-family:small;}
}
@media (max-width: 480px) {
  html {font-family:tiny;}
}

Javascript:

/* Imagine onmediaquery.min.js here */
var queries = [
  { context: 'desktop', callback: function() { console.log('Desktop layout triggered.'); } },
  { context: 'medium', callback: function() { console.log('Medium layout triggered.'); } },
  { context: 'small', callback: function() { console.log('Small layout triggered.'); } },
  { context: 'tiny', callback: function() { console.log('Tiny layout triggered.'); } }
];
MQ.init(queries);

Now, when I listen for each of these breakpoints, the small & tiny layouts are never called back when the browser is reloaded, or when the windows size is restored to that point instantly from being maximized, by clicking the restore button in the title bar. This is in Firefox 16. In Chrome 22, only the former problem occurs (small & tiny not called back after reload).

The minified javascript has been included in the page's head, after the CSS. the MQ.init() function is executed in-place, not in a document-ready or onload callback or anything.

[mhulse]

Do you have a demo page to look at? IDK about others, but it would help me to see the problem in action.

[mhulse]

Closed due to no action.