フォントサイズの変化を検知しイベントを発火させる

フォントサイズの変化を検知しイベントを発火させる方法をご紹介します。

※「Ctrl」 + 「+」キーなどで文字の大きさを変化させてみてください。

JavaScript

フォントサイズ（実際には要素の高さ）をsetIntervalで監視し、変化があったらjQuery.triggerメソッドを使ってイベントを呼び出します。
イベントは

(function($) {

$.getFontSize = function() {
									var getSize   = 0,
										assignId  = 'get-font-size-area',
										assignCss = {},
										$tmpDiv   = $('#' + assignId);

if ($tmpDiv.length === 0) {
										assignCss = {
											'margin'      : 0,
											'padding'     : 0,
											'border'      : 0,
											'height'      : 'auto',
											'display'     : 'none',
											'line-height' : 1,
											'font-size'   :'1em'
										};

$tmpDiv = $('<div>');
										$tmpDiv.attr('id', assignId).css(assignCss).text(' ');
										$('body').append($tmpDiv);
									}

getSize = $tmpDiv.height();

return getSize;
								};

$(function() {
									var stockFontSize = $.getFontSize();

setInterval(function() {
										var fontSize = $.getFontSize();
										if (stockFontSize !== fontSize) {
											$(document).trigger('changeFontSize');
											stockFontSize = fontSize;
										}
									}, 10);

});

})(jQuery);