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

我在 Asus Nexus 7（用 jQuery Mobile 编写）上运行该网页。 我在 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>

The 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。
• 然后调用 jQuery Mobile changePage() 并更改字体大小。

更新 20.11.2012 #2

jQuery Mobile 将 ui-page-active 类应用于 DOM 树中应该显示在屏幕上的部分。

CSS:

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

在应用此类之前，字体大小为 14px，但在应用此类之后，字体大小增加到 18px 或 22px。有时它工作正常。我在 iPad 和 Samsung Galaxy Tab 上检查过，效果很好。

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

这可能与以下有关字体增强 https://bugs.webkit.org/show_bug.cgi?id=FontBoosting.

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

或者，提供

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

在整个页面上禁用字体增强。