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字体大小不同

回答

相关问题