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

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

因此它将始终占据视口(viewport)底部的 10%。太棒了，因为这是我想要放置始终可见的文本的地方。
问题是当用户缩小时文本很小。当用户放大文本太大时。 所以我正在寻找一种解决方案，它可以让我调整文本大小 以始终适合容器 div 的高度。

fitText让我接近但有时失败 - 放大时，文本通常仍然很大。

Answer 1

你可以看看How to detect page zoom level in all modern browsers?获取缩放级别，然后使用 js 反向更改文本的字体大小属性。因此，例如，如果您的缩放级别为 1.2，则将默认字体大小除以 1.2，得到 13.33px。如果您设置此项，您的文本将保持相同大小，但其后面的图片将被缩放。