[SOLVED] iphone @media queries not working in (mobile-)Safari

Ionic Framework
1

I’m using the following media queries, and they work fine in the Chrome iPhone8 & responsive modes in DevTools.

But I just tested on Safari and the ios simulator and it fails.

// ip6/7/8 landscape
@media only screen
  and (max-device-width: 812px) 
  and (max-device-height: 414px) 
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2)
{
  ion-content.content-right-if-mq-landscape {
    position: absolute;
    left: 50%;
    top: var(--toolbar-min-height);
    height: 100%;
    width: 50%;
  }
}

any ideas?

2

Here’s a stackblitz

https://angular-ionic4-test-udtdf4.stackblitz.io

edit link:

3

[solved] use max-width instead of max-device-width

see this answer: Safari Responsive Design Mode CSS media query ‘device’ not applied