Javascript：如何获取浏览器的最小字体大小？

Question

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

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

仅仅设置样式并读回它是行不通的，因为它会返回设置而不是浏览器实际使用的内容。

我需要最小字体大小，以便我可以动态调整内容大小，将所有内容保留在一页上，而无需滚动。如果浏览器忽略我的字体大小更改，则很难做到这一点，因为我已经低于最小值。所以对于这种情况，我会缩小其他内容，比如图形。

Answer 1

我是这样做的：

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;