Question

我正在尝试生成一个由给定尺寸的最大可能数量的方形单元组成的表。困难的部分是，表格不得超过视口尺寸。该表的CSS如下：

.gameField {
  table-layout: fixed;
  position:  absolute;
  top: 0px; left: 0px;
  border-spacing: 1px 1px;
}

它有一个html属性 cellSpacing =“1”作为 border-spacing 非编译浏览器的后备。现在，我的代码基于以下假设：

viewPortWidth  = numberOfColumns * cellSideLength + (numberOfColumns + 1)
viewPortHeight = numberOfRows    * cellSideLength + (numberOfRows    + 1)

为了解释背后的逻辑 - 表格边长总是由单元格数*边长+边框组成。并且总有一个边框多于行数/列数，因此（numberOfColumns或Rows + 1）。将此视为数学方程式，我们知道 cellSideLength 和视口尺寸，可以轻松计算行数和列数：

numberOfColumns = Math.floor( (viewportWidth  - 1) / (cellSideLength + 1) )
numberOfRows    = Math.floor( (viewportHeight - 1) / (cellSideLength + 1) )

但问题是，它似乎无法正常工作。该表似乎比小分辨率上的小一点，并且在高分辨率上有点太大而超出了页面（我通过缩小页面测试了 - 这可能不是太准确的测试）。 - Live demonstration （cellSideLength设置为40px） - 您可以关闭页面，例如在Chromium中查看表格如何超出页面。

这让我觉得也许我对如何确定html表的大小的假设有点偏。如果有人有任何有用的建议，我会全力以赴。

Answer 1

获取ViewPort宽度取决于浏览器。有关详细信息，请参阅http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/。

此外，在CSS3中，可以使用单位'vw'（视口宽度）：

 .gameField { table-layout: fixed; width: 1vw }

生成给定尺寸的表格

1 个答案: