在移动缩放时调整相对大小的字体大小

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

您可以查看How to detect page zoom level in all modern browsers?来获取缩放级别，然后使用js以反方向更改文本的font-size属性。因此，如果您的缩放级别为1.2，则将默认字体大小设置为1.2并获得13.33px。如果你设置了这个，你的文字将保持相同的大小，但它背后的图片将被缩放。