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 Terminal as jQuery plugin纳入其中并使用div  和css：

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

如果父元素有位置：relative或absolute，则更改font-size .font元素将改变大小并触发resizer回调。

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

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

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

其中self是您的父元素，如果您需要在正文上检测此事件，则可以使用'body'代替。

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

2 个答案: