Школа
Веб-разработка

Это какие‑то другие пиксели? Как они соотносятся?

У меня вопрос насчëт размера экрана. Когда делаешь сайт в Вебфлоу, для смартфонов там ширина — около 320 пикселей. Я проверила свой Редми 8 Про, разрешение оказалось 1080×2340. Это какие‑то другие пиксели, получается? Как они соотносятся?

Мария Грибова
11 янв 2024
👁 4011   🗩2
Веб-разработка

Это какие‑то другие пиксели? Как они соотносятся?

У меня вопрос насчëт размера экрана. Когда делаешь сайт в Вебфлоу, для смартфонов там ширина — около 320 пикселей. Я проверила свой Редми 8 Про, разрешение оказалось 1080×2340. Это какие‑то другие пиксели, получается? Как они соотносятся?

Мария Грибова
11 янв 2024
👁 4011   🗩2
Игорь Петров
Разработчик, преподаватель Школы бюро
Полезно
 27
27
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

Мария!

1080×2340 — это количество физических пикселей, которые реально есть внутри экрана вашего телефона.

А ещё есть виртуальные или логические пиксели, количество которых не всегда равно физическим, обычно виртуальный пиксель вмещает несколько физических. Виртуальные пиксели нужны для удобства разработчиков и обратной совместимости: в коде пишем всегда виртуальные пиксели, а сколько будет реальных пикселей — уже зависит от качества экрана конкретного устройства.

Соотношение физических пикселей к виртуальным на устройстве характеризуется параметром ДПР (DPR, Device Pixel Ratio). Это ещё называют плотностью пикселей. Так будет выглядеть квадрат 2×2 пикселя в коде при разном ДПР:

.box {
  width: 2px;
  height: 2px;
}
ДПР 1, 2 и 3

Чем больше реальных пикселей на экране и чем выше DPR, тем более «гладкую» и качественную картинку сможет показать экран.

ДПР телефона Редми 8 Про — 2.75, значит виртуальных пикселей в 2,75 раза меньше, чем физических. При 1080 реальных пикселях ширины, виртуальных пикселей будет около 390. Именно для этой ширины и применятся стили страницы.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Полезно
 27
27
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Ещё стоит упомянуть, что CSS‑пиксель определяется как «примерно 1/96 дюйма, если экран находится на расстоянии стандартной вытянутой руки».

Есть ещё такой прикол: в статистике по разрешениям экранов 1920x1080 в топе. Но! Дофига мелких ноутов на Windows с таким разрешением. При этом в винде логично проставлена настройка масштабирования 150%, иначе всё очень мелким будет. На таких девайсах сайты фактически рендерятся как под 1280x720, и высота, конечно, ещё меньше за счёт съедания панелями системы и браузера.

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы