Почему MEDIA CSS не правильно определяют разрешение телефона?
Первое - вы не забыли поставить:<meta name="viewport" content="width=device-width, initial-scale=1.0">
А во вторых - https://mydevice.io/devices/
https://codepen.io/simkaUser/pen/YrZgWX?editors=1100 вроде бы корректно всё отображается ...