Computed font size is bigger than defined in CSS on the Asus Nexus 7

Question

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.

Answer 1

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.

Answer 2

I posted a potential answer to your question here.

Your problem is likely due to Chrome's text scaling setting, which sets text at a particular scale for accessibility reasons. A lot of users use this who struggle to read small text on their mobile. You cannot fix this and shouldn't try to resolve it, especially with sites that support mobile devices.

I recommend you either ignore it or modify your CSS so that it supports slightly differing text sizes.