Question

我使用Bootstrap和Angular创建一个单屏幕网页，该网页设计用于在小屏幕上显示（例如Adafruit 2.2＆＃34;或2.8＆＃34;用于Raspberry Pi的屏幕，或在电话屏幕上）。我想强制所有内容（大约3-4行的表格）扩展到屏幕（但不大于屏幕）（因此，绝对不大于100vh和100vw，绝对没有滚动或剪切文本）< / p>

但是对于我的生活，我无法解决这个问题。这是一个JSFiddle，我正在尝试做什么（只是没有Bootstrap / Angular东西的骨头）

CSS：

http

HTML：

https

http://jsfiddle.net/kjt7jLn6/

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

任何线索？

编辑：我已经查看了重复的答案，我的问题有所不同，因为我的问题更多的是需要滚动，而不是如何扩展文本。我可能需要尝试摆弄所提供的代码示例，但就目前情况而言，文本缩放仍然会在文本缩小时将文本从底部推出，这是我不想要的。

Answer 1

我相信您尝试完成的样式可以使用简单的html / css

实现

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

- Is it possible to dynamically scale text size based on browser width? 有关于动态缩放文本的信息

也是一个将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

的行高，也可以轻松修复这些问题

所以现在我的mini-UI精美大小，可以在我的手机（横向）和我的PiTFT上阅读（虽然这也需要一些调整）

使页面宽度和高度100％，文本缩放以匹配高度？

2 个答案: