移動瀏覽器上的HTML字體大小問題

我在Chrome移動模擬器中顯示簡單的HTML標記，並且觀察到當文本長度超出特定閾值時，呈現文本的大小突然變得非常大（我觀察到同一問題物理設備）：移動瀏覽器上的HTML字體大小問題

<html> 
    <body> 
     lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
     lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
     lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
     lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    </body> 
</html>

呈現這樣的：

但是

<html> 
    <body> 
     lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
     lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
     lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
     lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
     lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    </body> 
</html>

呈現了較大的字體：

爲什麼會這樣呢？

來源

2016-06-08 fiddler

使用CSS來手動設置字體大小和，而不是使用像素的具體數量（像素爲默認值）的大小來確定使用em這樣。

body{ 
    font-size: 1.5em; 
}

這會強制HTML保持文本大小與瀏覽器或窗口大小成比例。

您可以像這樣使用內聯css。

<BODY> 
    <span style="font-size:1.5em;"> 
     lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    </span> 
</BODY>

這是因爲當瀏覽器確定字體大小，基於像素，它不關注，它被顯示在屏幕的大小。但是，當您使用em時，瀏覽器將根據需要處理的像素大小來確定大小。

來源

2016-06-08 19:28:47

非常明確的解釋。謝謝。 – fiddler

發生這種情況是因爲瀏覽器有native CSS sheets，它們在顯示時應用於標記 - 這就是爲什麼許多前端框架使用normalize.css的變體。

注意：至於爲什麼字符數會改變字體的大小，我不知道，您必須參考該瀏覽器的默認樣式表。這也可能與您的文本位於body標籤之間而不是段落標籤，錨標籤，標題標籤等有關。

來源

2016-06-08 12:38:21

我試圖在我的示例中包含'normalize.css'，但它沒有解決問題。 – fiddler

Em ..那麼，爲什麼你不想谷歌它並找到規範？ :) –

在<head>中添加以下代碼。瀏覽器認爲這是桌面版本，並嘗試縮放它。那爲什麼它是如此之小： <meta name="viewport" content="width=device-width, initial-scale=1">

來源

2016-06-08 12:55:51

那麼，我已經知道這個解決方法，但我想了解上述行爲 – fiddler

移動瀏覽器上的HTML字體大小問題

回答

相關問題