Event when user changes font size in browser?

I need to get information when the user changes the font size in this browser.

I need it to move some elements that should belong in one dimension to the anchor inside the text.

So far I have not found anything, and I am a little worried that this is not possible. In this case, it should be possible to emulate it with a hidden div and some text inside and polling the script to change its width. But I hope someone has a more elegant solution.

EDIT:

I performed a survey as shown below. It is not tested on all browsers, but does not depend on the features of the browser. use it like $ ('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);
});
+3
source
2

https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js

jQuery Terminal jQuery div &nbsp; 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' .

0

Source: https://habr.com/ru/post/1784503/


All Articles