Nexus 7 Chrome上的計算字體大小與CSS字體大小不同

我有一些CSS和HTML，其中font-size明確指定爲13px，並且大多數情況下它保持這種方式，但偶爾Chrome上Nexus 7有時顯示與14px相同頁面的一部分;Nexus 7 Chrome上的計算字體大小與CSS字體大小不同

不幸的是，我一直無法重新在jsfiddle中的問題，所以我不知道發生了什麼事情。

一些如果我用來影響font-family和font-size的樣式可以在我試圖在http://jsfiddle.net/K9hyG/2/處重新創建問題時看到。

當使用Chrome調試器，我可以看到在計算樣式以下爲違規的段落之一：

border-collapse: separate; 
color: rgb(51,51,51); 
display: block; 
font-family: Optima, Lucia, 'MgOpen Cosmetica', 'Lucida Sans Unicode', sans-serif; 
font-size: 14px; 
    font[size="2"] - 13px default.aspx:427 
    body - 13px    default.aspx:2 
height: 36px; 
text-align: left; 
text-shadow: rgb(255,255,255) 0px 1px 0px; 
width: 877px;

的文字陰影是我的jQuery Mobile的使用情況產生。在Chrome調試器中，出現了兩個text-shadow指令實例。一個從div.ui-page.ui-body-c.ui-page-active（ui-body-c是激活組件）繼承而來，另一個從body.ui-mobile-viewport.ui-overlay-c，（ ui-overlay-c是激活組件），但都來自主題文件中CSS的相同部分。

如果我停用其中的一個，那麼Chrome Debugger中的違規段落實際上會變爲13px，但在設備上看起來仍然相同。如果它們都在Chrome調試器中停用，那麼它會回到14px。這仍然發生，即使文字陰影設置爲rgb(255,255,255) 0px 0px 0px。

我見過this post，但這個問題在很大程度上還沒有解決。

來源

2013-03-07 Reuben

我的一位同事發現了答案。它看起來像我是不知情的犧牲品Font Boosting

根據鏈接，可以通過對所有元素提供max-height: 1000000px或body, body *來禁用Font Boosting。

來源

2013-03-07 02:09:23 Reuben

非常感謝，因爲它已經解決了我迄今爲止最惱人的問題。 – richsilv 2013-06-26 22:54:06

你的問題可能是由於Chrome的文本縮放設置，它設置文本在特定比例的可訪問性原因。很多用戶使用這種方式來努力閱讀手機上的小文本。您無法解決此問題，因此不應嘗試解決此問題，尤其是在支持移動設備的網站上。

Chrome accessibility options

我建議你要麼忽略它或者修改你的CSS，使其支持略微不同的文本大小。

來源

2013-03-07 01:27:27

Google Nexus 7比手機稍微大一點，並被歸類爲平板電腦。雖然我同意字體大小應該更大，但我的客戶並沒有，並且具體要求字體大小在整個網站中保持一致。 – Reuben 2013-03-22 04:11:24

是否有一些Webkit特定的CSS屬性可以阻止這種可訪問性擴展？這個大小決定了我的佈局的一些部分，我想禁用這些設計元素的縮放比例。 – Danielku15 2014-02-20 14:11:31

@ Danielku15禁用縮放是一個非常糟糕的主意，這是不可能的，因爲瀏覽器必須能夠在許多國家按照法律按比例縮放頁面。我猜想，很多地方或網站都會中斷。 – 2014-02-20 14:46:33

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

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

也許寬度和高度值必須根據您的需要進行更正。

來源

2013-03-22 18:55:48 metamagicson

正如[https://bugs.webkit.org/show_bug.cgi?id=FontBoosting]中所述，最大高度僅需要大於當前高度即可禁用Font Boosting。大量的數據用於捕捉幾乎所有的情況。 – Reuben 2013-03-24 23:26:34

Nexus 7 Chrome上的計算字體大小與CSS字體大小不同

回答

相關問題