I am having an issue with an Angular site with padding that only appears on mobile Safari. I am trying to address it with media queries but so far none on them are taking effect. I am running the iOS simulator with the iPhone 11. I have tried:
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait)
@media only screen
and (device-width: 414px)
and (device-height: 896px)
and (-webkit-device-pixel-ratio: 2)
@media only screen
and (min-width: 375px)
and (max-width: 767px)
I got these from various searches for the iPhone 11. The simulator does not apply the change. I have also included this in the index.html:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This is what the issue looks like on mobile safari, where the element is clipped off at the top.
Interestingly, on the Chrome dev tools iPhone layout, it does apply the style properly. The issue is that the problem does not occur on Chrome so it ends up over applying the padding like shown:
So based on this, I think the queries are correctly applied but they just are not being accepted by mobile Safari. I'm not sure what is is that I'm missing. Thank you in advance for any assistance.
EDIT:
The most recent attepmt with min-width instead of min-device-width still has not worked.
@media only screen
and (min-width: 375px)
and (max-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait)
