Android上的Chrome調整字體大小

顯然，一段文本達到一定長度後，android上的chrome會決定調整文本大小並使其變大（導致各種各樣的樂趣）。現在我有一個網站，其中大約一半的p-tag符合我設定的尺寸，另一半則隨意改變 - 顯然取決於段落的長度。Android上的Chrome調整字體大小

我究竟如何解決這個問題？

來源

2012-07-02 Sprax

你有一個例子嗎？另外，哪款Android和Chrome版本？ – Junuxx

這被稱爲「字體提升」，在WebKit bug中有詳細描述。目前無法禁用它。

來源

2012-07-06 05:53:20

我找到了我的頁面的解決方案：給父元素一個寬度和高度！字體不會超出這些邊界，所以它會保持很小（呃）。

來源

2012-07-12 08:07:06

將max-height: 999999px;添加到要防止字體提升的元素或其父項。

來源

2012-10-18 23:14:35 moeffju

它的作品...怎麼回事！ – Laurent

+12

Android Chrome僅將字體提升應用於具有動態高度的元素。只要您指定高度或最大高度，則不會應用字體提升。將最大高度設置爲大數很簡單，應該沒有副作用。 – moeffju

只是一個警告。這解決了我在Android上使用Chrome字體時遇到的問題，並不是很好。 **然而**它打破了特定版本的iOS網站的ipad視圖。 –

包括文檔<head>在以下<meta>標籤：

<meta name="viewport" content="width=device-width, initial-scale=1">

這將正確地建立視圖幀，並且因此消除了對「FontBoosting」的需要。

來源

2013-01-03 01:29:50

這絕對是首選的解決方案。如果您關心移動設備的外觀，那麼請考慮您的視口的所有權！ –

雖然這不會禁用字體提升。 –

它肯定會糾正不必要的縮放，我將來會使用它。 – Dizzley

經過一些測試後，這個規則幫了我一個忙。必須添加到包含提升文本的元素或其父項，具體取決於div/table結構。

element or parent element { 
    /* prevent font boosting on mobile devices */ 
    width: 100%; 
    height: auto; 
    min-height: 1px; 
    max-height: 999999px; 
}

也許寬度和heigth值必須進行修正，根據您的需求。

來源

2013-03-22 18:50:52 metamagicson

將其置於您的重置狀態。 html * {max-height:1000000px;}

來源

2013-11-06 21:58:02

對我造成粘滯頁腳的問題，不得不做html身體*而不是 –

現在有您可以設置來控制這個CSS屬性：

-webkit-text-size-adjust: none; 
-moz-text-size-adjust: none; 
-ms-text-size-adjust: none;

見https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust

來源

2017-02-01 15:48:38 Gareth

text-size-adjust：沒有爲我最新的android chrome工作。 –

Android上的Chrome調整字體大小

回答

相關問題