Событие, когда пользователь меняет размер шрифта в браузере?

Question

Мне нужно получать информацию, когда пользователь меняет размер шрифта в своем браузере.

Мне нужно переместить некоторые элементы, которые должны быть относительными в одном измерении к привязке внутри текста.

Пока что я ничего не нашел, и немного волнуюсь, что это невозможно. В этом случае должна быть возможность эмулировать его с помощью скрытого элемента div и некоторого текста внутри, а также скрипт, запрашивающий изменения его ширины. Но я надеюсь, что у кого-то есть более элегантное решение.

EDIT:

Я реализовал функцию опроса следующим образом. Он не проверен должным образом на всех браузерах, но не зависит от особенностей браузера. используйте его как $ ('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 как плагин jQuery и использую div с   и css:

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

таким образом, если родительский элемент, имеющий положение: относительное или абсолютное, изменит размер шрифта, элемент .font изменит размер и вызовет ответный вызов resizer.

Вы можете использовать этот плагин так:

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

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

, где self - ваш родительский элемент, если вам нужно обнаружить это событие в теле, вы можете использовать 'body'.