white-space：nowrap 在 Google Chrome 移动设备的底部生成额外的空白 space

Question

在 Google Chrome 移动设备上应用 white-space: nowrap 时，它会在页面底部生成一些额外的空白 space，导致垂直滚动到空白区域。

例如：

<!DOCTYPE html>
<html lang="en">
  <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>Document</title>
    <style>
      p {
        white-space: nowrap;
      }
    </style>
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores magnam
      voluptatum eum laborum quo nihil distinctio hic nulla, libero aliquam
      consequatur. Architecto quod doloremque nostrum, vel perspiciatis ipsam
      quia at.
    </p>
  </body>
</html>

在 Google Chrome 上查看移动设备上的页面时，或使用 Google Chrome 的开发工具时，它会生成一些额外的空白 space 在页面底部。我已经尝试将 height 和 min-height 应用于正文，但无论我使用什么值，底部的 space 都会持续存在，例如：

body {
  height: 100%;
}

这是 Google Chrome 开发工具上记录的问题的 gif：

我检查了 Firefox，它没有生成额外的空白 space。在 Google Chrome 桌面上，底部没有额外的空白 space。

任何想法可能是什么问题以及如何解决它？

Answer 1

看起来这是 chrome 仿真中的错误。如果你缩小 window 向下（而不是模拟）它不会垂直滚动。我也没有在 Android.

上垂直滚动

如果您想要更准确地模拟其他设备，www.browserstack.com 是一个很好的解决方案。我与该网站或任何支持它的公司没有隶属关系。

white-space：nowrap 在 Google Chrome 移动设备的底部生成额外的空白 space

white-space: nowrap generating extra empty space at the bottom on Google Chrome mobile

html

css

mobile

google-chrome