Warm tip: This article is reproduced from serverfault.com, please click

javascript-如何定义随浏览器缩放级别缩放的字体大小?

(javascript - How to define a font size that scales with browser zoom level?)

发布于 2020-11-27 23:24:50

对于我的webapp,我尝试创建一个div,无论缩放级别如何,该div都保持相同的大小。也就是说,如果我使用真实的标尺测量div,并且它的宽度为3英寸,那么无论我放大或缩小多远,它的宽度始终都是3英寸。

我注意到,如果定义font-sizehtml文档的,则可以将相对论rem用于该div及其所有子元素。

到目前为止,我得到的最接近的是元素font-size: 1vh;上的设置html然后,无论何时使用rem单位,无论缩放级别如何,div及其内容都保持相同大小,这是完美的。

该解决方案的唯一问题是,它可以随视口高度缩放。也就是说,如果使窗口更短,则元素的高度将减小。同样,如果使窗口更高,则元素的高度将增加。

这很糟糕,因为对于我的所有用户,无论他们的显示器大小如何,我都希望该项目的大小相同。就是说,无论所有人的视口宽度,高度,监视器大小或任何其他大小,它都应为3英寸宽。

我唯一想解决这个问题的方法就是以某种方式检测浏览器的缩放级别,然后使用Javascript修改html元素的font-size属性,但是这种方法看起来非常挑剔,而且在功能上不太好跨浏览器。

Questioner
Ryan Peschel
Viewed
0
Ryan Peschel 2020-11-28 09:32:42

我想通了,它似乎可行。除非有人想出更好的解决方案,否则可能会使用它:

function scaleFontSize() {
  let scaledFontSize = (16 / window.devicePixelRatio) + "px";
  
  document.documentElement.style["font-size"] = scaledFontSize;
}

scaleFontSize();

window.addEventListener('resize', scaleFontSize, true);