Question

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

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

没有额外的CSS。这只会创建两个空div个border s。

当我在手机上加载时，我可以垂直向下滚动页面少量。那里什么都没有。是什么产生这种垂直滚动？

Here's a fiddle:

尝试在手机上查看full screen embedded version

无论是在实际手机上还是在Chrome浏览器的开发者工具中（在手机视图中），我都会获得相同的效果。

修改现在使用适合手机视口的border - 滚动窗台就会出现。

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添加边框会导致手机上的垂直滚动

1 个答案: