移动设备上的双倍字体大小不是双倍宽度？桌面好的

Question

Android Chrome有很多问题,包括手机和平板电脑.

我正在尝试用文本(font-size)填充容器宽度.

当我为element设置double font-size时,我预计也会有双倍宽度.在桌面上工作得非常好,但在移动设备上却没有,宽度略大于2倍.

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

结果:

在桌面上2 * "font-size" = 2 * "width"< - 确定

在移动2 * "font-size" ~= 2.2 * "width"< - Nope,2.2是错误的......

究竟:

1. 检查容器宽度,例如 300像素
2. 循环容器儿童,大约6x跨度
3. 检查实际的儿童宽度,例如.150像素
4. 划分"container width" / "child width",例如 结果是2
5. 检查实际的子字体大小,例如.30PX
6. 乘以"child font-size" * "result of divide",前.结果是60px

实例:

自由职业者PHP Web开发人员Tomas.cc | PHP5,SQL,jQuery,CSS3,HTML5

完整代码:

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

渲染:

这是桌面Chrome,几乎是完美的.

这是Android Chrome,不太好......

非常感谢您的帮助:)尝试解决它已经有3个小时了:/

Answer 1

我不认为你需要将宽度设置为#big-wrap（文本容器）。您希望文本在水平和垂直方向上均居中。

你可以做什么。

#big-wrap{
    width:auto;
}

从媒体查询中删除所有宽度或使其自动。然后

#big-wrap span{
    display:block;
}

span 中的所有文本都会分解为新行。