Why is Outlook.com displaying the Mobile Version of my Email in IE9?
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!
Author: Kyle Lapaglia
Author: Kyle Lapaglia
8 thoughts on “Why is Outlook.com displaying the Mobile Version of my Email in IE9?”
Comments are closed.
Windows 8 mail app shows mobile version of responsive emails…
http://www.campaignmonitor.com/blog/post/3965/windows-8-mail-media-queries-in-email-code-are-not-for-you
I’ve found though that Samsung devices do not work with max-device-width, only max-width…
nice find!
‘handheld’ is not a media type that most modern mobile and tablet user agents report.
this type is sufficient and covers the condition being targeted:
@media only screen and (max-device-width: 480px){}
I’ve been experiencing difficulty with this recently. The dilemma is by using max-device-width, your emails no longer render your mobile version on the S3 or S4. Does anyone know a solution to get around this issue with Samsung devices or force IE9 outlook to behave itself?
I think I’ve found a solution, but just maybe.
Instead of using the <style> which contains the media queries in the <head> section, I placed it at the end of the <body> section.
Everywhere I looked it said that this should not be done because of HTML standards and watnot, but this seemed to completely eliminate this issue with outlook in IE9 and allowed the e-mail to keep its mobile version with the max-width only.
It works everywhere I tested (Outlook.com, Gmail, Outlook 2003/2007/2010/2011/2013, Yahoo, Lotus, Iphones and Androids – some of this tests were made with Litmus, btw).
Could anybody confirm if this works for them as well? I promise I’ll keep my fingers crossed for you tests to succeed! Thanks!
I had this issue with 3 almost identical templates, and noticed that in the one that was screwed up in Outlook.com/IE9 the background declaration for a mobile image replacement was set like this:
background: url(images/top_small_topic_m.jpg) 0 0 no-repeat !important;
I then separated it like this:
background-image: url(images/bottom_topic_phone_m.jpg) !important; background-repeat: no-repeat !important;
And now it works.
I also moved my style section below the body content to get this to work. I had all of my media queries below the body in the first place, but included the following in the header, which caused the mobile version to show in Outlook.com with IE 9:
.ReadMsgBody {width: 100%;}
.ExternalClass {width: 100%;}
span.yshortcuts { color:#000; background-color:none; border:none;}
span.yshortcuts:hover,
span.yshortcuts:active,
span.yshortcuts:focus {color:#000; background-color:none; border:none;}
.eoa_d7w{ width:100% !important; } .eoa_2v8{ color:#404040 !important; }
Thanks for the tips guys! Especially Lucas!
wesleyts are you saying you should remove that from the style within the body to get it working?