如何設置相對於屏幕尺寸的正文字體大小

Question

好吧，我目前正在做某事，但是現在我正在構建一個移動版本，對於該移動版本，我想設置相對於窗口的文本大小。 我試圖這樣做：

// Getting the right font-size
var viewportWidth  = document.documentElement.clientWidth;
var viewportHeight = document.documentElement.clientHeight;
document.getElementsByTagName("body")[0].style.fontSize = (viewportHeight / 10);

但是由於某種原因，它告訴我了這一點：

Uncaught TypeError: cannot read 'style' of type undefined.

你們可以幫我解決這個問題，還是有另一種方法（也許可以使用CSS）來解決我的問題。

謝謝。

Answer 1

您的錯誤消息告訴您document.getElementsByTagName("body")[0]給您undefined 。 因此，腳本運行時您沒有body元素（因此您無法更改其樣式）。

或者：

• 將其移出head
• 將其轉換為可以在讀取/加載文檔等時調用的函數

---

另外，CSS font-size屬性采用長度，長度要求單位。

Answer 2

嘗試document.getElementsByTagName（“ body”）[0] .style.fontSize =（viewportHeight / 10）+“ px”;

或您要使用的任何其他單元。

也可以在這里看看它可能是您要找的東西

http://snook.ca/archives/html_and_css/vm-vh-units

http://dev.opera.com/articles/view/css-viewport-units/

Answer 3

簡單嘗試一下：

document.addEventListener('load', function(){
   var viewportWidth  = document.documentElement.clientWidth;
   var viewportHeight = document.documentElement.clientHeight;
   document.body.style.fontSize = (viewportHeight / 10);
}, false);