---

The Problem

We recently had a customer report a discrepancy in our test result. They thought that the mobile version of their email was being displayed in Outlook.com/IE9 whereas the correct version was being displayed in all other browsers. We take actual screen captures in Outlook.com so this support ticket had me very intrigued. Turns out, this wasn't as open/shut as I had thought. When viewing their email in the live email client (Outlook.com/IE9), it rendered fine from the beginning. I then rescaled the window (to be more narrow aprox. 800px), went back to the inbox, re-opened the email, and voilà - the mobile version appeared. I rescaled the browser once again, this time I made it wider (aprox. 1200px) and re-opened the email and still saw the mobile version.

The Hypothesis

At first I assumed it was being caused by the Outlook.com ads running along the hand right column. But this theory was proven wrong after opening, closing, and re-opening several times. A second theory I had was that Outlook.com was using Javascript to manipulate the size of the iFrame that holds the email based on any number of factors: browser width, width of the email, height of the email, etc.

The Conclusion

Fortunately in this case, our customer tinkered a bit more and concluded the following: They changed:

@media handheld, only screen and (max-width: 480px)

to:

@media handheld, only screen and (max-device-width: 480px)

and that seemed to do the trick. When it comes to media queries, max-width is the width of the target display area, e.g. the browser or iFrame whereas max-device-width is the width of the device's entire rendering area, e.g. the actual device screen. Has this issue ever happened to you? If so, feel free to share your experience in our comments below!