android - 最小宽度在 HTML/CSS 中以纵向模式在 Android 屏幕上导致额外的垂直空间

Question

最近，我在使用以下 HTML 代码和 CSS 代码时遇到了 Android Chrome 浏览器的问题，仅在纵向模式下(横向看起来不错)。

我使用 Bootstrap 框架

body {

  min-width: 900px;

}

#test div {

  max-height: 400px;

  overflow: auto;

}

#test table {

  margin-bottom: 0;

}

#test table tr td {

  width: 25%;

  padding-right: 5px;

}

#test table tr th {

  width: 25%;

}

<div class="col-xs-12 col-sm-10 col-sm-offset-1" id="test">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Name</th>
        <th>Size</th>
        <th>Modification</th>
        <th>Action</th>
      </tr>
    </thead>
  </table>

  <div>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<div class="clearfix"></div>

或者更好的是，一个 jsfiddle 文档:http://jsfiddle.net/32Lg9ddf/

现在，请在 Android 设备纵向模式 中模拟它，你会看到在底部会出现一个额外的空间(高度更大但在 Chrome 的 Inspect Element 中不可见)滚动时的页面。

这很奇怪，因为在使用 iOS 和 Windows Phone 的其他设备上它看起来非常好并且没有显示额外的空间(或更大的高度)。

问题看我的录屏:http://i.imgur.com/Q0oAvT2.gif我使用带有 7"屏幕的 Nexus 7 平板电脑进行远程调试。

我做错了什么？

Answer 1

您希望它如何在小于 900 像素的屏幕尺寸上显示？您可以使用带有媒体查询的响应式 css 来处理，网上有很多示例。

例如，当屏幕尺寸为 600 到 900 像素时，它可以减小字体大小或更改 min-width(并可能增加 max-height)。您还可以将 900px 的 min-width 仅应用于较大的屏幕尺寸，而对其余屏幕尺寸使用 width:auto。

设置overflow CSS 中的 'scroll' 属性将显示水平滚动条而不是下方的额外空间，但仅当使用的屏幕尺寸太小时。 overflow 设置为 hidden 只会切掉任何不适合的东西，而不会在下面留出额外的空间(如果数据是固定的并且总是适合你可以使用它或减少最小宽度大小)。

这可以通过将其添加到您的 CSS 文件中来完成:

body { overflow:scroll;} 

这将水平和/或垂直滚动​​。或者，您可以将其应用于 table 标记。

响应式 HTML 示例，包括 bootstrap，这是为您处理此问题的最流行工具。 http://www.w3schools.com/html/html_responsive.asp