I am having trouble gettimg our media query to display our mobile code in the yahoo app on ios. I am aware that for Android you need to add an extra head tag because yahoo strips the code so I am doing this for Android, yet on ios I am still getting the desktop version of my email in the yahoo app. We are using all image based email with a large one (600px wide) for desktop and smaller one (320px wide) for mobile and a simple media query which should display the correct version depending on screen size.

Other info:

  • I am using @media (min-width: 481px) as the cutoff to display either the larger desktop or smaller mobile version of the image depsneding on screen size.
  • I thought maybe the yahoo app was not reading the screen as mobile size due to retina, since the iphone screens now have essentially 2x or 3x the pixels, and it may be thinking the screen size is 750 and then displaying the desktop version on the iphone. So as a test I made a new mobile version of the image that was 750x1334 and kept the desktop version as 600px, also keeping our media query cutoff at 481px (no change). Unfortunately this did not fix the problem either. The new retina mobile version looked fantastic in the regular iphone mail app but in the yahoo app it still showed the 600px desktop version. so we've determined that the media query reads screen size, NOT resolution.
  • I have tried a specific yahoo query to target as well but this didn't work either: @media yahoo {

Has anyone else had this problem and can share a solution?