使页面的宽度和高度为100%，文本缩放比例与高度匹配

Question

我正在使用Bootstrap和Angular制作一个单屏幕网页，该网页设计为在小屏幕上显示（例如树莓派的Adafruit 2.2"或2.8"屏幕，或在手机屏幕上显示）。我想强制所有内容（大约是一张表的3-4行）扩展到屏幕，但不大于屏幕（因此，绝对不大于100vh和100vw，绝对不滚动或剪切文本）

但就我的一生而言，我无法解决这个问题。这里有一个JSFiddle，介绍了我正在尝试做的事情（只是没有Bootstrap/Angular的东西）

CSS：

#statusController {
  background: #333;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
}
td {
  font-size: 100vh;
}
body,
html {
  padding: 0;
  margin: 0;
  color: white;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
}

HTML:

<div id="statusController">
  <table>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
  </table>

http://jsfiddle.net/kjt7jLn6/

我也尝试过使用jQuery和Angular插件，如BigText、fitText、textFit等，但结果相同——文本被展开并向下推过页面底部，所以你需要滚动才能看到其余部分。

有线索吗？

编辑：我看过重复的答案，我的问题不同，因为我的问题更多的是关于滚动的需要，而不是如何展开文本。我可能需要尝试篡改提供的代码示例，但就目前情况来看，当有足够的文本时，文本缩放仍然会将文本从底部推掉，这是我不想要的。

Answer 1

我相信，使用简单的html/css 可以实现您想要实现的样式

-http://www.w3schools.com/html/html_tables.asp<---用于表格宽度-您可以使用html5将站点边距设置为0px，以使表格的屏幕全宽

-是否可以根据浏览器宽度动态缩放文本大小？具有关于动态缩放文本的信息

也是一个向表中添加div的站点https://css-tricks.com/using-divs-inside-tables/

Answer 2

我能够通过使用jQuery和一些高度的动态计算来解决我的特定问题

http://jsfiddle.net/kjt7jLn6/6/

不再需要CSS，也不需要对表进行更改，只需要在页面顶部运行一小段Javascript，即可在页面加载和调整大小时运行：

$(window).resize(function () {
  var tcount = $("table tr").length
  var tsize = ($(window).width() / $(window).height() * 2)
  $("table tr").css("height", (100 / tcount) + "vh")
  $("table tr").css("font-size", (100 / tcount / tsize) + "vh")
}).resize()

这将获取表中的所有tr元素，并将其存储在tcount中。每个tr的高度被设置为100 / tcount，以使元素均匀地分布在页面上。

tsize是窗口的宽度/高度*2。字体大小通过划分100 / tcount / tsize 来设置

到目前为止，它似乎运行得相当好。如果窗口的高度大于宽度（这很容易修复），则它会中断；当使用1行（有时大于20行）或一行有大量文本时，它会中断。通过考虑tsize 的行高，这些也很容易固定

因此，现在我的迷你UI的大小调整得很漂亮，在我的手机（横向）和PiTFT上都可读（尽管这也需要一些调整）