ブラウザのズームを検知して通知

browser_zoom_event.js

(function($, window, document, undefined)
{
    /**
     * add browser zoom event
     * @see http://novemberborn.net/2007/12/javascriptpage-zoom-ff3-128
     */
    
    var ZOOM_CHECK_INTERVAL = 1;
    
    $(function() {
        var std = [];
        std[0] = $("<div />").css({
            "position": "absolute",
            "top": -100,
            "left": "10%",
            "width": 10,
            "height": 10,
            "visibility": "hidden"
        });
        $("body").prepend(std[0]);
        
        std[1] = $("<div />").css({
            "position": "absolute",
            "top": -100,
            "left": std[0].offset().left,
            "width": 10,
            "height": 10,
            "visibility": "hidden"
        });
        $("body").prepend(std[1]);
        
        var scale = std[1].offset().left / std[0].offset().left;
        var newScale = scale;
        
        setInterval(function() {
            newScale = std[1].offset().left / std[0].offset().left;
            if (newScale !== scale) {
                $("*").trigger("zoom", [newScale, scale]);
                scale = newScale;
            }
        }, ZOOM_CHECK_INTERVAL);
    });
}
)(jQuery, this, this.document);

$(function() {
    $("#result").bind("zoom", function(event, scale, prev) {
        $(this)
            .html((scale < prev ? "Zoom Out" : "Zoom In")
                  + "<br />current: " + scale + ",  prev: " + prev)
            .css("font-size", Math.round(16 / scale));
    });
});