Why MEDIA CSS doesn't detect phone resolution correctly?

Question

Adaptive design

Into this code:

@media all and (max-width: 720px) {
  .apt-short-card {
      border-top: 2px solid red !important;
  }
}

@media all and (max-width: 566px) {
.apt-short-card {
      border-top: 2px solid blue !important;
} 
}

gives expected behavior in chrome emulator
1) if resolution is 720 or less highlight top border red
2) if resolution is 566 or less highlight top border blue
But on 720px phone, I get rule #2 working.
How does it work? Thank you.

Answer 1

First, you didn't forget to put:
And secondly - https://mydevice.io/devices/

Answer 2

There is such a thing, in mobile phone browsers, the resolution does not match the phone screen resolution.
For example, in an iPad with a retina display, the resolution is 1024 by 768, you yourself understand that on the matrix it has 2048 × 1536

Answer 3

https://codepen.io/simkaUser/pen/YrZgWX?editors=1100 Everything seems to be displayed correctly...