Setting IE "Optical Zoom" feature using Javascript/CSS

Question

The site I'm maintaining has been designed pretty rigidly using pixels for font sizes, dimensions, absolute positioning etc.

Now there is a feature request to add font resizing by users. While I know that is impossible without redesigning the site from the ground up using relative dimensions, I discovered that the site plays pretty nicely with the IE7/IE8 zoom feature (Ctrl + & Ctrl -).

The question is, is there a way to 'suggest' IE to open this site at a default zoom level (of say, 125%) without the users themselves requiring to zoom?

The site is used with IE 7+ only.

Answer 1

If this is your users Choice, leave it to their browsers most mature Browsers us a zoom that magnifies their page rendering (IE 7&8, Opera, FireFox, Chrome 2.0, Safari?). Besides depending on which system(screen resolution) your users are coming from will dictate their zoom choice. Unfortunately each browser handles remembering your zoom setting a little different for instance chrome remembers per site while ie is a global setting for each new tab/window.

Answer 2

If you really want to do what you want, what I of course not recommend, try something like this:

$(function(){
    var ratio = 1;
    $(document.body).css("zoom", 1.25); // zoom the page on DOMReady

    // bring back a 'normalized' behavior keyevent zooming
    $(document).keydown(function(e){
        if(e.ctrlKey && {187:1, 189:1, 96:1}[e.which]) {
            switch(e.which){
                case 187: // ctrl +
                    ratio += 0.25;
                    break;

                case 189: // ctrl -
                    ratio -= 0.25;
                    break;

                case 96: // ctrl 0
                    ratio = 1;
            }

            $(this.body).css("zoom", ratio);

            e.preventDefault();
        }
    });
});