Настройка IE & # 8220; Оптическое увеличение & # 8221; функция с использованием Javascript / CSS

Question

Сайт, который я обслуживаю, был разработан довольно жестко с использованием пикселей для размеров шрифта, размеров, абсолютного позиционирования и т. д.

Теперь есть запрос на добавление изменения размера шрифта пользователями. Хотя я знаю, что это невозможно без редизайна сайта с нуля с использованием относительных размеров, я обнаружил, что сайт прекрасно работает с функцией масштабирования IE7 / IE8 (Ctrl + & Ctrl -).

Вопрос в том, есть ли способ «предложить» IE открыть этот сайт с уровнем масштабирования по умолчанию (скажем, 125%), при этом сами пользователи не требуют увеличения?

Сайт используется только с IE 7+.

Answer 1

Если это ваш выбор для пользователей, оставьте его наиболее зрелым браузерам. Браузеры используют масштаб, который увеличивает визуализацию их страниц (IE 7 и 8, Opera, FireFox, Chrome 2.0, Safari?). Кроме того, в зависимости от того, из какой системы (разрешение экрана) исходят ваши пользователи, будет зависеть выбор масштаба. К сожалению, каждый браузер обрабатывает запоминание настроек масштабирования немного по-разному, например, запоминает Chrome для сайта, то есть является глобальным параметром для каждой новой вкладки / окна.

Answer 2

Если вы действительно хотите делать то, что хотите, что я, конечно, не рекомендую , попробуйте что-то вроде этого:

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