0

Начинаю изучать основы веб разработки, и заметил небольшую странность с девтулзом хрома.

Имеем следующую HTML страничку:

html,
body {
  margin: 0;
  padding: 0;
}

.wrapper {
  display: grid;
  grid-template-columns: 300px 300px;
}

.test1 {
  background: red;
}

.test2 {
  background: green;
}
<!DOCTYPE html>
<html lang="ru-RU">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Test</title>
</head>

<body>
  <div class="wrapper">
    <div class="test1">300px</div>
    <div class="test2">300px</div>
  </div>
</body>

</html>

На странице выводится два блока по 300px. Теперь открываю devtools в хроме, запускаю эмуляцию устройства нажатием кнопки . Далее в верхней менюшке добавляю новый девайс

И, например, хочу эмулировать устройство Xiaomi Redmi 5. Гуглю его характеристики, и указываю в девтулзах

Device Pixel Ratio не знаю что такое, поэтому укажу 1

Добавляю девайс, запускаю все это дело и вижу такую картину:

Оба блока целиком поместились в область видимости. Теперь запускаю сайт на реальном устройстве (на физическом). И получается такая картина:

Зеленый блок на реальном устройстве НЕ помещается в область видимости и обрезается.

Теперь вопрос - почему в девтулзах оба блока целиком поместились в область видимости, а при тестировании на устройстве оказалось, что часть контента урезается? Баг девтулза или я чего то не понимаю?

Благодарю!

2
  • Не смогу ответить развернуто, но разрешение нужно делить на 2, тогда вы получите фактические размеры экрана. Т.е. у вашего редми размеры будут - 360х720
    – Ara_Bog
    27 фев 2022 в 18:46
  • > Device Pixel Ratio не знаю что такое, поэтому укажу 1 - вот именно в этом и проблема. Физический пиксель на экранах высокой плотности давно не соответствует программному (грубо - один пиксель вашего сайта отображается ЧЕТЫРЬМЯ (2*2) физическими пикселями устройства). Это, с одной стороны, улучшило отбражение шрифтов и векторной графики, с другой - привело к тому, что скриншоты с айфончиков имеют дебильно конские размеры. 1 мар 2022 в 10:22

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.