Why is Outlook.com displaying the Mobile Version of my Email in IE9?
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.
Fortunately in this case, our customer tinkered a bit more and concluded the following:
@media handheld, only screen and (max-width: 480px)
@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!