css - 如何使视口相对字体大小响应 Safari 中的浏览器缩放？

Question

我正在尝试创建一个固定位置的导航元素，其高度占视口高度的一定百分比。这可以使用视口单位来实现：

.header-nav {
    ...
    position: fixed;
    height: min(10vh, 50px);
    ...
}

请注意，如果调整窗口大小或调整浏览器缩放级别，将观察到相同的效果。

在这个导航元素中，我想对文本的大小实现相同的效果，使其不会溢出，因此我还font-size需要响应我的视口大小

.header-nav {
    ...
    position: fixed;
    height: min(10vh, 50px);
    font-size: min(1.5vh, 16px);
    ...
}

这是问题所在：在 Safari 上，所应用的视口单位font-size将响应由调整窗口大小引起的视口变化，而不是通过更改浏览器缩放级别。因此，如果窗口大小不改变，则1.5vh解析为固定像素值，这容易受到 UI 缩放的影响，并随着浏览器缩放级别的增加导致文本溢出。

我曾尝试使用CSS“锁定”技术来达到预期的效果，但是此解决方案依赖于使用视口单位来计算视口的当前大小，因此遇到了同样的问题。

我可以使用媒体查询来提供大致相同的效果：

@media screen and (max-width: 768px) {
    .header-nav {
        font-size: 10px;
    }
}

@media screen and (max-width: 640px) {
    .header-nav {
        font-size: 8.33px;
     }
}

@media screen and (max-width: 550px) {
    .header-nav {
        font-size: 7.14px;
    }
}

/* ...and so on */

这将解决溢出问题，但它并不完美，并且会导致文本随着浏览器缩放级别的增加（更不用说它的代码更多）捕捉到（略微）不同的大小。

我在 Safari 中仅使用 CSS 可以尝试做的事情吗？

标签： csssafariwebkitviewportfont-size