Мария!
1080×2340 — это количество физических пикселей, которые реально есть внутри экрана вашего телефона.
А ещё есть виртуальные или логические пиксели, количество которых не всегда равно физическим, обычно виртуальный пиксель вмещает несколько физических. Виртуальные пиксели нужны для удобства разработчиков и обратной совместимости: в коде пишем всегда виртуальные пиксели, а сколько будет реальных пикселей — уже зависит от качества экрана конкретного устройства.
Соотношение физических пикселей к виртуальным на устройстве характеризуется параметром ДПР (DPR, Device Pixel Ratio). Это ещё называют плотностью пикселей. Так будет выглядеть квадрат 2×2 пикселя в коде при разном ДПР:
.box {
width: 2px;
height: 2px;
}Чем больше реальных пикселей на экране и чем выше DPR, тем более «гладкую» и качественную картинку сможет показать экран.
ДПР телефона Редми 8 Про — 2.75, значит виртуальных пикселей в 2,75 раза меньше, чем физических. При 1080 реальных пикселях ширины, виртуальных пикселей будет около 390. Именно для этой ширины и применятся стили страницы.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.