I have been testing a media query that looks like this:
@media screen and (max-width: 600px) {
.blah {
font-size: 1.25rem;
}
}
When I test this in responsive mode on browser dev tools, everything looks great. I can see all the changes as I resize the viewport.
However, when I switch to landscape mode on an actual iPhone 5s device, the media query doesn't seem to be respected. Portrait mode works fine, but landscape mode is not applying the changes as expected.
Some things I have tried include:
- Changing the text color in the rule (it does change, confirming the rule is applied)
- Ensuring the viewport meta tag is included as recommended
- Increasing the
max-widthvalue in case landscape mode is wider - Switching from rems to pixels, where I noticed an interesting behavior
When I set the text size to 8px, I noticed that in landscape mode the text does scale, but not to the specified size. This led me to think it might be a device-specific issue.
Even with a specific media query for landscape mode, the font size still doesn't match the desired size. It seems like the device is not strictly following the viewport settings I have confirmed are in place.
I have tried different approaches, including using !important, but it seems that something unusual is happening specifically on an iPhone 5s when rendering in landscape mode. It appears the device is making its own decisions about font sizes regardless of the specified settings.