html - 计算出的字体大小大于 Asus Nexus 7 上 CSS 中定义的大小

Question

我在 Asus Nexus 7 上运行网页(用 jQueryMobile 编写)。我在 CSS 中将字体大小设置为 14px，但在调试期间(在 PC 上使用 Chrome)我可以看到它的计算大小是 22px。

HTML 代码如下所示:

<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>

class="header" div 是 14px，但接下来的是 22px。

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;
}

我检查过文本缩放是 100%。它是华硕 Nexus 7 上的错误吗？是否有可能使它成为 14px？在 iPad 和 Samsung Galaxy Tab 上一切正常。

2012 年 11 月 20 日更新:

我进行了建议的更改，但它们没有帮助。JavaScript 中的代码是这样工作的:

• 我在 JS 中创建 HTML

• 然后我将这个新创建的 HTML 插入到 DOM 中

• 此时(在更改页面之前)在 Chrome 调试器(连接到 Nexus)中我可以看到 14px。
• 然后调用 jQueryMobile changePage() 并更改字体大小。

更新 20.11.2012 #2

jQueryMobile 将类 ui-page-active 应用到应该显示在屏幕上的 DOM 树部分。

CSS:

.ui-mobile .ui-page-active { display: block; overflow: visible; }

在应用这个类之前字体大小是14px，但是之后，它增加到18px或者22px。有时它工作正常。我在 iPad 和 Samsung Galaxy Tab 上检查过，它工作正常。

有时再次进入页面会将字体大小恢复为 14px，旋转设备时也会发生类似情况。

Answer 1

这可能与 Font Boosting 有关.

要禁用特定元素，请在元素、父元素或祖父元素上提供 max-height: 1000000px。

或者，提供

body, body * {
    max-height: 1000000px;
}

在整个页面上禁用字体提升。