Broken! Screen-Specific Mobile Tags on iPhone 6 and 6+
We recently updated our emails to include screen-specific mobile tags. The idea is that you pick different customizations based on your phone screen size.
Two weeks ago I tested a basic template that successfully swapped image on iPhone 5, 6 and 6+. Each device swapped to a different image, with each image sized differently for each device. You could approach such a task differently if the image itself was the same by simply resizing the image. The point here is that you have three sets of tags, and the right one is picked by the device, using language in the code like this:
@media only screen and (min-device-width: 319px) and (max-device-width: 321px) @media only screen and (min-device-width: 374px) and (max-device-width: 376px) @media only screen and (min-device-width: 413px) and (max-device-width: 415px)
Today, iPhone 6 and 6+ both are behaving as if they think they are 320-pixel wide devices. I have confirmed that they are choosing the CSS designated
@media only screen and (min-device-width: 319px) and
(max-device-width: 321px) no matter where that set of formats is placed in the header.
This aberrant behavior fits well with a glitch Litmus was displaying earlier last week, where screen captures from iPhone 6/6+ were cut off at 320 pixels.
Does anyone know if this is a documented iOS bug in the latest update? Anyone else have any suggestions?