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

我使用Bootstrap和Angular制作了一个设计为在小屏幕上显示的单屏幕网页（例如树莓派Adafruit 2.2“或2.8”屏幕或手机屏幕）。我想强制所有内容（大约3-4行的表格）扩大到但不能大于屏幕（所以，绝对不能大于100vh和100vw，绝对不能滚动或切断文本）使页面宽度和高度达到100％，文本缩放以匹配高度？

但是对于我的生活，我无法解决这个问题。这里有一个的jsfiddle有什么，我试图做（只是裸露的骨头没有引导/角的东西）

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和角插件，像BigText，fitText，textFit等等，但结果相同 - 文本扩展并按下了页面的底部，所以您需要滚动才能看到其余的内容。

任何线索？

编辑：我看了一下重复的答案，我的问题不同，在我的问题更多的是需要滚动，而不是如何扩大文本。我可能需要尝试提供的代码示例摆弄，但因为它的立场，文字缩放仍然推文断底，当有足够的话，我不想要的。

来源

2015-12-04 Grayda

也许可以将字体大小定义为“3vmin”而不是“100vh”？ – somethinghere

@somethinghere我给这一个镜头，虽然它并没有做太多：http://jsfiddle.net/kjt7jLn6/3/。 'vmin'定义为：“1vmin = 1vw或1vh，以较小者为准”。我也试着使用'vw'，而不是'vh'（这是有道理的，并且很可能在我结束一个错字），但仍然没有好 – Grayda

这些都是可悲的是我们拥有的唯一可预测的响应单位，所以你将不得不这样做接着就，随即。最大的问题是，它在字体，操作系统，设备，屏幕大小等方面有所不同。您应该切断文本或提供溢出的方式，或者如果您希望100％它有一定的规模，但除此之外，你总是必须记住边缘案例。 – somethinghere

我相信，你所要完成的样式可以实现用简单的HTML/CSS

- http://www.w3schools.com/html/html_tables.asp < ---用于工作台宽度 -html5你可以用它来设置网站的利润率为0px给予充分表屏幕的宽度

- Is it possible to dynamically scale text size based on browser width? 对缩放文本动态

也是一个网站加入DIV对表的信息https://css-tricks.com/using-divs-inside-tables/

来源

2015-12-04 13:37:18 Alex

这个答案没用。 OP说的问题恰恰适合文本。 –

对不起猜我误解了这个问题，然后，因为我以为他在和表的大小也 – Alex

我觉得现在的问题是，以适应文本，但尽量好麻烦！ :) –

我能够通过使用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上可读（尽管这需要一些调整过）

来源

2015-12-05 12:11:51 Grayda

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

回答

相关问题