时间戳

首页 > 解决方案 > white-space: nowrap 在 Google Chrome 移动设备的底部生成额外的空白空间

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

问题描述

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

例如：

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

在移动设备上使用谷歌浏览器查看页面时，或者使用谷歌浏览器的开发工具时，它会在页面底部产生一些额外的空白区域。我已经尝试将heightandmin-height应用于身体，但无论我使用什么值，底部的空间都会持续存在，例如：

body {
  height: 100%;
}

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

white-space: nowrap 额外的空白空间

我检查了 Firefox，它不会产生额外的空白空间。在 Google Chrome 桌面上，底部不会产生额外的空白空间。

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

标签： htmlcssgoogle-chromemobile

解决方案

看起来这是 chrome 仿真中的错误。如果您缩小窗口（而不是模拟），它不会垂直滚动。我也不会在我的 Android 上垂直滚动。

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

推荐阅读