移动缩放时，在相对大小的元素中调整字体大小

Question

我有一个非常图形的页面(不是基于文本的)内容。我之所以提到这一点，是因为预计移动设备上的访问者会捏紧，放大或缩小，以查看整个页面或专注于一个小细节。

<meta name="viewport" content="minimum-scale=0.3, maximum-scale=1.2">

在移动设备上，我在页面底部有一个div

.bottom-bar{
    position: absolute; 
    height: 10%;
    bottom: 0; right: 0; left: 0;
}

因此，它将永远占据最后10%的视口。这很好，因为这就是我想要放置的文本，永远是可见的。

问题是，当用户放大文本时，文本是很小的。当用户放大文本时太大了。因此，我正在寻找一种解决方案，允许我调整文本的大小，以始终适合容器div的高度。

fitText让我离得很近，但有时还是失败了--当放大时，文本往往仍然很大。

Answer 1

您可以查看如何在所有现代浏览器中检测页面缩放级别？以获取缩放级别，然后使用js在倒转方向上更改文本的字体大小属性。因此，例如，如果缩放级别为1.2，则默认字体大小为1.2，得到13.33px。如果您设置了这个，您的文本将保持相同的大小，但后面的图片将被放大。