Почему MEDIA CSS не правильно определяют разрешение телефона?

Question

[Ivan Komarov]

Во такой код:

@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;
} 
}

дает ожидаемое поведение в эмуляторе хрома
1) если разрешение 720 или меньше подсвечиваем верхний бордер красным
2) если разрешение 566 или меньше подсвечиваем верхний бордер синим

Но на телефоне c разрешением 720px, я получаю работающее правило №2.
Как так получается? Спасибо.

Answer 1

[Aligatro]

Первое - вы не забыли поставить:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

А во вторых - https://mydevice.io/devices/

Comments

[Ivan Komarov]

Нет, не забыл конечно.
За ссылку - спасибо. Теперь, мне все ясно.

Answer 2

[Никита]

Есть такое дело, в браузерах мобильного телефона разрешение не соответствует разрешению экрана телефона.

Например в айпэде с ретина дисплеем разрешение 1024 на 768, сами понимаете что на матрице у него 2048×1536

Comments

[Aligatro]

Кстати, до сих пор не нашел сервиса где бы это можно было вычислить, есть что-то на подобии -https://mydevice.io/devices, но там увы не все модели представлены. Может вы видели нечто подобное?

[Ivan Komarov]

И как с этим бороться? Имеет ли смысла расставлять брекпоинты на плотность пикселей?

[Сергей delphinpro]

медиазапросы работают от логических пикселей.

Answer 3

[Максим]

https://codepen.io/simkaUser/pen/YrZgWX?editors=1100 вроде бы корректно всё отображается ...