Ereignis, wenn der Benutzer die Schriftgröße im Browser ändert?

Question

Ich muss informiert werden, wenn der Benutzer die Schriftgröße in seinem Browser ändert.

Ich brauche es, um einige Elemente, die in einer Dimension relativ zu einem Anker in einem Text sein müssen, neu zu positionieren.

Bis jetzt habe ich nichts gefunden und ich bin ein bisschen besorgt, dass es nicht möglich ist. In diesem Fall sollte es möglich sein, es mit einem versteckten div und etwas Text innerhalb und einem Skript, das für Änderungen seiner Breite pollt, zu emulieren. Aber ich hoffe, jemand hat eine elegantere Lösung.

EDIT:

ich implementiert, um die Abfrage Sache wie folgt. Es ist nicht auf allen Browsern getestet, aber es hängt nicht von browserspezifischen Funktionen ab. . Verwenden Sie es wie $ ('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

Hier ist ein Link zu einem Artikel beschreibt verschiedene Methoden Schriftgrößenanpassung zu erkennen:

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

Answer 2

Sie können Idee aus dieser Datei https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js

ich habe es in jQuery Terminal as jQuery plugin und div mit   und CSS verwenden incorported verwenden:

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

so, wenn Elternelement, die Position haben: relative oder absolute, Schriftgröße ändern das .font Element wird Größe ändern und Resizer Callback auslösen.

können Sie dieses Plugin wie folgt verwenden:

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

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

wo self Ihr übergeordnetes Element ist, wenn Sie dieses Ereignis auf dem Körper erkennen, müssen Sie 'body' stattdessen verwenden können.