用户更改浏览器中的字体大小时发生的事件？

Question

当用户更改浏览器中的字体大小时，我需要得到通知。

我需要它来重新定位一些元素，这些元素必须在一维上与文本内的锚点相关。

到目前为止我还没有找到任何东西，我有点担心这是不可能的。在这种情况下，应该可以使用隐藏的 div 和内部的一些文本以及轮询其宽度变化的脚本来模拟它。但我希望有人有更优雅的解决方案。

编辑：

我实现了如下的轮询。它没有在所有浏览器上经过正确测试，但它不依赖于浏览器的特定功能。像 $('body').bind('fontResize', function(){...}) 一样使用它

$(function(){
  $('body').append($('<div id="theFontResizeCaptureDiv">A<br>B<br>C</div>'));
  $('#theFontResizeCaptureDiv').css({visibility: 'hidden', position: 'absolute'});

  window.setInterval(function(){
    var div = $('#theFontResizeCaptureDiv');
    var stored = parseInt(div.attr('c_height'));
    if(isNaN(stored)){ // first run
      div.attr('c_height', div.innerHeight());
    }else if(stored != div.innerHeight()){ // changed
      div.attr('c_height', div.innerHeight());
      $('body').trigger('fontResize');
    }
  }, 200);
});

Answer 1

这是一篇描述检测字体大小调整的不同方法的文章的链接：

http://www.alistapart.com/articles/fontresizing/

Answer 2

您可以使用此文件中的想法https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js

我已将其作为 jQuery 插件合并到 jQuery Terminal 中，并将 div 与

 

和 css 一起使用：

.font {
   position: absolute;
   font-size: inherit;
   top: 0;
   left: 0;
   width: 1em;
   height: 1em;
}

这样，如果父元素的位置：相对或绝对，更改字体大小，

.font

元素将更改大小并触发缩放器回调。

您可以像这样使用这个插件：

var font = $('<div class="font">&nbsp;</div>').appendTo(self);

font.resizer(function() {
   // font changed size
});

其中

self

是您的父元素，如果您需要在 body 上检测此事件，您可以使用

'body'

代替。

Answer 3

确实，这可能是一个较旧的问题，但我想有必要给出一个答案，因为它在今天仍然相关。

要了解客户端的字体大小更改，您可以使用

document.documentElement

类监听

MutationObserver

，这样它将对文档元素所做的任何更改运行回调。在该回调中，您可以检查

style

属性是否已更改 - 这本质上意味着用户更改了浏览器字体大小。

它具有广泛的浏览器支持，根据此图表caniuse.com/mutationobserver。

示例：

document.addEventListener(('DOMContentLoaded') => {
    const observer = new MutationObserver(([mutation]) => {
        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
            // Do something
        }
    });

    observer.observe(document.documentElement);
})