Javascript：如何获得浏览器'；最小字体大小是多少？

获取浏览器最小字体大小的最佳方法是什么？我快速编写了以下代码，它执行二进制搜索。它是有效的，但我想知道是否有一个标准的或更有效的方法

function getMinimumFontSize() {
  var el = document.createElement('div');
  document.body.appendChild(el);
  el.innerHTML = "<div><p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p></div>";
  el.style.fontSize = '1px';
  el.style.width = '64px';
  var minimumHeight = el.offsetHeight;
  var least = 0;
  var most = 64;
  var middle; 
  for (var i = 0; i < 32; ++i) {
    middle = (least + most)/2;
    el.style.fontSize = middle + 'px';
    if (e.offsetHeight === minimumHeight) {
      least = middle;
    } else {
      most = middle;
    }
  }
  return middle;
}

函数getMinimumFontSize（）{ var el=document.createElement（'div'）； 文件.正文.附件（el）； el.innerHTML=“a b c d e f g h i j k l m n o p q r s t u v w x y z

”； el.style.fontSize='1px'； el.style.width='64px'； var最小高度=el离地高度； var最小值=0； var-most=64； var中间值； 对于（变量i=0；i<32；++i）{ 中间=（最少+最多）/2； el.style.fontSize=中间+像素； 如果（如离地高度===最小高度）{ 最小=中等； }否则{ most=中等； } } 返回中间； } 仅仅设置样式并将其读回是不起作用的，因为它将返回设置，而不是浏览器实际使用的内容

我需要最小的字体大小，这样我就可以动态地重新调整内容大小，使所有内容都保持在一个页面上，而无需滚动。如果浏览器忽略我的字体大小更改，因为我的字体大小已低于最小值，则很难做到这一点。因此，对于这种情况，我将缩小其他内容，例如图形。

我是这样做的：

var ta = document.createElement('textarea');
ta.style.display = 'none';
ta.style.fontSize = '6px'; // I think this is the smallest possible, if not put smaller value
document.body.appendChild(ta); // needs to be part of DOM to be able to calculate
var minimumFontSize = window.getComputedStyle(ta, null).getPropertyValue('font-size'); // returns '20px' for me when I set minimum font size to 20px

编辑：这在firefox上不起作用，所以我创建了一个新的稍微不同的方法：

var ta = document.createElement('div');
ta.style.fontSize = '6px';
ta.style.lineHeight = '1';
ta.innerHTML = 'a';
document.body.appendChild(ta);
var minimumFontSize = ta.clientHeight;

---

6年后，Chrome和Firefox都允许最小字体大小为零。这是我的基本方法，类似于第一个答案中的第一个示例：

element.style.fontSize = 0;
let actualMinSize = getComputedStyle(element).fontSize;

您必须从计算结果中去掉“px”以获得一个数字，并且必须显示该元素，但它可以通过

位置：绝对来脱离屏幕

这似乎在Chrome和Firefox中都可以使用，因此不需要使用

clientHeight

解决AFAICT问题

今年早些时候，在Chrome73中，存在根em空间大小和Chrome中最小字体大小设置的问题。从那时起，Chrome改变了他们的最小字体大小策略和用户界面。他们现在支持零最小值，就像Firefox一样

我的应用程序有一个用户大小的窗口，可以垂直滚动文本，元素的宽度通过字体大小间接设置，因此元素越宽，字体越大。如果用户试图将窗口大小设置为低于配置的最小字体大小，我需要将其作为最小元素宽度处理

虽然我可以将某个元素的字体大小设置为零，但小于3px的字体大小是有问题的，因为字体大小越小，它与文本宽度的比例就越小，还有其他一些原因我还没有完全调试。在某一点上，请求的1px宽度缩减允许我更改字体大小，但

客户端宽度冻结：更改字体大小对宽度没有影响。减少2倍是可以的，因为变化更大，或者看起来更大。我可以在调试器的“监视”窗格中将style.width设置为所需的值，这将使我摆脱无休止的循环

---

最奇怪的是，我可以在不同的字体大小/宽度下造成这个问题，没有精确的临界点。它更多的是一个小的变化是有问题的范围。这可能是一个Chrome bug，但对我来说，3倍以下的尺寸似乎不太可能。我可能会在这个元素中强制执行我自己的最小3px，以避免这些问题。

最小字体大小不会告诉您任何有关缩放的信息。如果你需要把所有的东西都放在视口里，那就用一个流动的css网格或者别的什么。我支持@Bart的观察，但从学术角度来说：如果我真的想要这些信息，这与我会做的非常接近。