使頁面寬度和高度達到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％，文本縮放以匹配高度？

回答

相關問題