计算字体大小大于在Asus Nexus 7上的CSS中定义的字体大小 [英] Computed font size is bigger than defined in CSS on the Asus Nexus 7
问题描述
我在华硕Nexus 7（用jQueryMobile写的）上运行网页。
我在CSS中设置字体大小为14px，但在调试（使用电脑上的Chrome），我可以看到，它的计算大小是22px。
HTML代码如下所示：
< div data -role =contentclass =ui-contentrole =main>
< div id =summaryContent>
< div class =contentPanel>
< div class =header>
一些漂亮的信息，14px
< / div>
< div class =content>
< div class =headerText>
文本大小为22px（但应为14px）
< / div>
< div class =element>
大小为22px的文本（但应为14px）
< span class =dateInfo> 30.11.2012< / span>
< / div>
< div class =element>
大小为22px的文本（但应为14px）
< span class =dateInfo> 2012< / span>
< / div>
< div class =element>
大小为22px的文本（但应为14px）
< span class =dateInfo> 1981年< / span>
< / div>
< div class =headerText>
文本大小为22px（但应为14px）
< / div>
< div class =element>
文本大小为22px（但应为14px）
< / div>
< div class =element>
文本大小为22px（但应为14px）
< / div>
< / div>
< / div>
< / div>
< / div>
class =header div
CSS代码：
.contentPanel> div
{
padding：10px;
font-size：14px;
}
.contentPanel div.header，
{
font-weight：bold;
-moz-box-sizing：border-box;
-webkit-box-sizing：border-box;
box-sizing：border-box;
}
.contentPanel div.content
{
color：＃000000;
border-radius：0px 0px 5px 5px;
border-bottom：1px solid＃B5B5B5;
}
.contentPanel div.content div.element {
padding：10px 10px 10px 0px;
display：inline-block;
}
.contentPanel div.content span.dateInfo {
color：＃7a7a7a;
}
.headerText {
color：＃454545;
font-weight：bold;
}
我检查Text Scaling是否为100％。它是在华硕Nexus 7上的错误？是否有可能使它14px？
更新20.11.2012：
我建议更改但他们没有帮助。
JavaScript中的代码如下：
-
我在JS中创建HTML
b $ b -
然后我将这个新创建的HTML插入DOM
- 此时（Chrome页面调整器） ）我可以看到14px。
- 然后调用jQueryMobile changePage（），然后调整字体大小。
Update 20.11.2012＃2
jQueryMobile将类ui-page-active应用于应该在屏幕上显示的DOM树的一部分。 p>
CSS：
.ui-mobile .ui-page-active {显示：block; overflow：visible; }
在应用这个类之前，字体大小为14px，但是之后它会增加到18px或22px 。有时它的工作确定。我检查了在iPad和三星Galaxy Tab和它的工作正常。
有时再次输入页面将字体大小恢复为14px，类似的事情发生，旋转设备。 >
这可能与 Font Boosting 。
要禁用特定元素，请提供 max-height：1000000px
或者，请提供
body，body * {
max-height：1000000px;
}
可在整个页面上禁用字体提升。
I run the web page on Asus Nexus 7 (written in jQueryMobile). I have set font size in CSS for 14px but during debugging (using Chrome on the PC) I can see that its computed size is 22px.
The HTML code looks like this:
<div data-role="content" class="ui-content" role="main">
<div id="summaryContent">
<div class="contentPanel">
<div class="header">
Some nice info with 14px
</div>
<div class="content">
<div class="headerText">
Text with size of 22px (but should be 14px)
</div>
<div class="element">
Text with size of 22px (but should be 14px)
<span class="dateInfo"> 30.11.2012</span>
</div>
<div class="element">
Text with size of 22px (but should be 14px)
<span class="dateInfo"> 2012</span>
</div>
<div class="element">
Text with size of 22px (but should be 14px)
<span class="dateInfo"> 1981</span>
</div>
<div class="headerText">
Text with size of 22px (but should be 14px)
</div>
<div class="element">
Text with size of 22px (but should be 14px)
</div>
<div class="element">
Text with size of 22px (but should be 14px)
</div>
</div>
</div>
</div>
</div>
The class="header" div is 14px, but the next ones are 22px.
CSS code:
.contentPanel > div
{
padding: 10px;
font-size: 14px;
}
.contentPanel div.header,
{
font-weight: bold;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.contentPanel div.content
{
color: #000000;
border-radius: 0px 0px 5px 5px;
border-bottom: 1px solid #B5B5B5;
}
.contentPanel div.content div.element {
padding: 10px 10px 10px 0px;
display: inline-block;
}
.contentPanel div.content span.dateInfo {
color: #7a7a7a;
}
.headerText {
color: #454545;
font-weight: bold;
}
I checked that Text Scaling is 100%. Is it bug on Asus Nexus 7? Is it possible to make it 14px? On iPad and on Samsung Galaxy Tab everything is ok.
Update 20.11.2012:
I made suggested changes but they didn't help. Code in JavaScript works like this:
I create HTML in JS
Then I insert this newly created HTML into DOM
- At this point (before changing page) in Chrome debugger (that is connected to Nexus) I can see 14px.
- Then jQueryMobile changePage() is called and then font size changes.
Update 20.11.2012 #2
jQueryMobile applies class ui-page-active to the part of DOM tree that is supposed to be shown on the screen.
CSS:
.ui-mobile .ui-page-active { display: block; overflow: visible; }
Before applying this class the font size is 14px, but after it, it increases to 18px or 22px. Sometimes it works ok. I checked that on iPad and on Samsung Galaxy Tab and it works fine.
Sometimes entering page again revert font size to 14px, similar thing happens while rotating device.
This might be something to do with Font Boosting.
To disable for a particular element, provide max-height: 1000000px on the element, parent or grandfather element.
Alternatively, provide
body, body * {
max-height: 1000000px;
}
to disable Font Boosting on an entire page.
这篇关于计算字体大小大于在Asus Nexus 7上的CSS中定义的字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
