Почему добавление границ в div вызывает вертикальную прокрутку на телефоне

Я чувствую себя глупым из-за того, что не могу понять это. У меня есть очень простой кусочек HTML:

<body>
    <div style="border: 40px solid red"></div>
    <div style="border: 40px solid green"></div>
</body>

Там нет дополнительных CSS. Это просто создает два пустых divс толстым borderвокруг них.

Когда я загружаю это на телефон, я могу вертикально прокрутить страницу вниз на небольшую сумму. Там нет ничего там. Что вызывает эту вертикальную прокрутку?

Вот скрипка:

И полноэкранная встроенная версия для просмотра на телефоне.

Я получаю одинаковый эффект, независимо от того, смотрю я на телефоне или в инструментах разработчика Chrome (в режиме просмотра телефона).

Изменить сейчас, используя borders, которые будут вписываться в область просмотра телефона - прокрутка порога происходит.

Источник

1 ответ

Решение

Вам нужно добавить отзывчивый метатег

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

было бы неплохо добавить также margin:0 в body а также box-sizing:border-box в *

что-то вроде этого:

*,
*::before,
*::after {
  box-sizing: border-box
}
body {
  margin: 0
}
.b {
  border: 40px solid
}
.red {
  border-color: red
}
.green {
  border-color: green
}
<meta name="viewport" content="width=device-width, initial-scale=1">

<body>
  <div class="b red"></div>
  <div class="b green"></div>
</body>

Источник
Другие вопросы по тегам