I'm currently creating a mobile responsive email, and I found a weird quirk.

The following CSS code shows my iPhone 6 Plus hiding the text in portrait mode, and showing the text in landscape mode.

@media only screen and (max-width: 700px) {
  /*iPhone 6 Plus portrait will hide text. Landscape will not.*/
  span.iphone_hide {
    width: 0 !important;
    display: none !important;

Note that the iPhone 6 screen resolution is 1334x750, and the iPhone 6 Plus screen resolution is 1920x1080. None of the values match the max-width of 700px.

If I swap out the max-width to max-device-width, and set the value to either 750, 1334, 1080, and 1920, none of the orientations trigger the @media query. I'm very confused as to why 700px works, but anything above 700px doesn't work as intended? Am I looking at it wrong?