为什么向 div 添加边框会导致 phone 垂直滚动

Question

我为没有弄清楚这一点而感到愚蠢。我有一个非常简单的 HTML:

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

没有额外的css。这只是创建了两个空的 divs，周围有粗 borders。

当我在 phone 上加载它时，我可以垂直向下滚动少量页面。下面什么也没有。是什么产生了这种垂直滚动？

Here's a fiddle:

和 full screen embedded version 尝试在 phone

上查看

无论是在实际 phone 上还是在 Chrome 的开发人员工具中（在 phone 视图中），我都会得到相同的效果。

编辑现在使用适合 phone 视口的 borders - 出现滚动窗台。

Answer 1

您需要添加 responsive meta tag

<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>

为什么向 div 添加边框会导致 phone 垂直滚动

Why does adding borders to a div cause vertical scrolling on a phone

html

css

responsive