How to correctly compose a media query using the iPhone 5 as an example?

Question

iPhone

Below is the media query code that was suggested to me and which only works halfway in the browser emulator. That is, when the emulator is in portrait mode, everything works, but nothing is displayed at all in landscape mode. I tried to swap the values ​​71 / 40, but the miracle did not happen. And now it turns out that either the emulator is rude and changes the format, or I don’t know how to correctly compose a media query.

@media screen and (device-aspect-ratio: 40 / 71){
  @media all and (device-width: 568px) and (device-height: 320px) and (orientation: landscape) {}

  @media all and (device-width: 320px) and (device-height: 568px) and (orientation: portrait) {}
}

Answer 1

Google and try a couple of options - why is it so difficult?
stackoverflow.com/questions/12539697/iphone-5-css-...
stephen.io/mediaqueries/#iPhone
www.paulund.co.uk/ios-media-queries-boilerplate