Media query not working in iPhone 5s landscape mode

Question

I have a media query resembling:

@media screen and (max-width: 600px) {
  .blah {
    font-size: 1.25rem;
  }
}

In responsive testing mode in browser dev tools, everything works fine. I can see all the changes as I drag and scale the mock viewport.

On the iPhone 5s (actual) device, portrait mode works fine, but in landscape mode on the device, it's not respecting this same media query.

Things I've tried include:

1. Changing the text color in the rule (yup, it's bright red alright, so I know my rule is being applied)
2. Ensuring that I've included the usually recommended viewport meta tag (along with the other version that includes the device rule)
3. Bumping up max-width to an even larger number, in case landscape mode was being interpreted as wider than its standard setting (568px?)
4. Using pixels instead of rems, and here's where I finally noticed something that is happening.

After setting the text to a teeny 8px and again confirming that portrait mode works fine, I noticed that in landscape mode, the text size is being affected, and in fact it's scaling the text, but still not according to my specified size (again, as rendered correctly in portrait mode, and I've already established that the max-width is "registering" in landscape mode).

Does this tell me something? What do you think is happening here, something device/version specific?

The fact that font-size does seem to change in landscape mode, but not to the size I specify (and can see correctly in portrait mode--8px is very small, but in landscape mode it's only reducing slightly in size), sounds almost like the device/browser is "helping out" according to its own rules.

But as mentioned, I've included: <meta name="viewport" content="initial-scale=1.0"> and can see it in my outputted HTML. <meta name="viewport" content="width=device-width, initial-scale=1.0"> , same result.

This question is similar to another, which was left unanswered: iPhone 5 landscape media queries not working . The upvoted response there ignores the context of and fails to answer the original question, and doesn't answer mine, either.

(Also note that the above poster appeared to be experiencing a similar problem, without resolution/explanation.)

ANOTHER UPDATE: I can specify a media query specifically for this case:

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
  .blah {
    font-size: .5rem;
  }
}

And I can adjust the font size, but the numbers don't match--I just have to eyeball it and choose smaller and smaller numbers until I get the size I want. And (yet) again, this is only in landscape mode, despite having the correct max-width in my media query (so I know it's working).

I've tried other things, with different sizes and colors each time to confirm that changes are working, adding !important (to no real effect), and can only conclude that something "weird" is happening on my iPhone 5s when rendering in Landscape mode only. It appears to not be adhering strictly to my viewport setting, which I have verified is present in the rendered HTML, and making some odd choices of its own.

Answer 1

Okay, I think it's working now. I've used a landscape-specific media query targeting my device screen size:

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
  html {
    -webkit-text-size-adjust: none; /* none for no scaling */
  }
}

This was recommended here and here . All my other settings are being picked up now, too (because it wasn't just one rule--I was changing multiple elements in the media query).

(Thanks to those posters for their solutions. :)