使用 Javascript/CSS 设置 IE“光学缩放”功能答案

【问题标题】：Setting IE "Optical Zoom" feature using Javascript/CSS使用 Javascript/CSS 设置 IE“光学缩放”功能
【发布时间】：2010-10-24 00:36:59
【问题描述】：

我维护的网站的设计非常严格，使用像素来表示字体大小、尺寸、绝对定位等。

现在有一个功能请求添加用户调整字体大小。虽然我知道如果不使用相对尺寸从头开始重新设计站点是不可能的，但我发现该站点与 IE7/IE8 缩放功能 (Ctrl + & Ctrl -) 配合得非常好。

问题是，有没有办法“建议”IE 以默认缩放级别（例如 125%）打开此站点，而用户自己不需要缩放？

该网站仅用于 IE 7+。

【问题讨论】：

标签： css internet-explorer accessibility font-size

【解决方案1】：

如果你真的想做你想做的事，我当然不推荐，试试这样的：

$(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();
        }
    });
});

【讨论】：

【解决方案2】：

如果这是您的用户选择，请将其留给他们的浏览器最成熟的浏览器我们可以放大他们的页面渲染（IE 7&8、Opera、FireFox、Chrome 2.0、Safari？）。除了取决于您的用户来自哪个系统（屏幕分辨率）之外，这将决定他们的缩放选择。不幸的是，每个浏览器处理记住您的缩放设置略有不同，例如 chrome 记住每个站点，而 ie 是每个新选项卡/窗口的全局设置。

【讨论】：