scottjehl/Respond — pull request #134 by pdaoust (2012-06-18 21:44:39+00:00)
Title: grab em value from a blank, unstyled document, rather than the current document.

I've been doing a lot of testing (cf. [Issue 128](https://github.com/scottjehl/Respond/issues/128)) and discovered that, when you write a media query with relative (em) values, supporting browsers use the user agent's stylesheet as the reference for the size of an em. Respond, because it injects a test `div` into the document, uses the document's base font size. In cases where someone has a stylesheet like this:

```css
:root, body { font-size: 62.5% /* make 1em = 10px }
```

Respond calculates the wrong em size; 10px rather than 16px (or whatever the user has set up their default font size as).

This pull request modifies the `getEmValue()` function to inject an invisible blank `iframe` into the document, creates a basic document with a test `

`, and gets the `offsetWidth` of that `div`. Basically the same technique as before, except all the measuring happens in that `iframe`. Since that `iframe` is unstyled, `getEmValue()` will always get the em value from the user agent stylesheet.

Tested successfully on IE6, IE8, Firefox 3.0 and 3.5. It didn't seem to work on Safari 3 or 4.

Demos (with base font size set to 75%):

http://heliosstudio.ca/respond-test/respond-test.php?rootsize=75 (current behaviour, with Respond pulled from current master)
http://heliosstudio.ca/respond-test/respond-test-iframe.php?rootsize=75 (my pull request)

Resize the window; in browsers that support media queries, you'll see that there's a mismatch between breakpoints in the first demo. In the second demo, they match. (In Internet Explorer, the browser's media query engine and Respond both report the same breakpoints, but that's because Respond *is* the media query engine :-) In the first demo, the breakpoint is at too narrow a point, and in the second demo, it matches the behaviour of other browsers.)