Double font-size is not double width on mobile? Desktop ok

Question

I have weird problem with Android Chrome, both mobile and tablet.

I'm trying to fill container width with text (font-size).

When I set double font-size for element, I expected that there will be also double width. Works almost great on desktop, but on mobile isn't, width is little bit bigger than 2x.

ChildFontSize = "actual child font-size" * "container width" / "child width"

Result:

On desktop 2 * "font-size" = 2 * "width" <- OK

On mobile 2 * "font-size" ~= 2.2 * "width" <- Nope, 2.2 is wrong...

Exactly:

1. Check container width, ex. 300px
2. Loop container children, about 6x span
3. Check actual child width, ex. 150px
4. Divide "container width" / "child width", ex. result is 2
5. Check actual child font-size, ex. 30px
6. Multiply "child font-size" * "result of divide", ex. result is 60px

Live example:

Freelance PHP Web Developer Tomas.cc | PHP5, SQL, jQuery, CSS3, HTML5

Full code:

var actual;
var newsize;
var multi;
var bigwidth = document.getElementById("big-wrap").offsetWidth;
var bigs = document.getElementsByClassName("big");
for (i = 0; i < bigs.length; i++) {
    actual = parseFloat(window.getComputedStyle(bigs[i], null).getPropertyValue('font-size')).toFixed(1);
    multi = (bigwidth / bigs[i].offsetWidth);
    newsize = parseFloat(actual * multi).toFixed(1);
    bigs[i].style.fontSize = newsize + "px";
}

Rendered:

This is Desktop Chrome, almost perfect.

This is Android Chrome, not good...

Thanks much for help :) Trying to solve it about 3 hours already :/

Answer 1

Please try to express everything in em unit

Answer 2

I don't think so you need to width to #big-wrap (text container). You want text to be center in horizontal as well as vertical.

what you can do.

#big-wrap{
    width:auto;
}

remove all width from media queries or make it auto. then

#big-wrap span{
    display:block;
}

all text in span break down to new line.