Имитировать масштабирование браузера с помощью JavaScript

Ответ 1

Там вы:

Использование:

document.body.style.zoom=1.0;this.blur();

1.0 означает 100%

150% - 1,5 1000% будет 10,0

this.blur() означает, что курсор, возможно, вы выбрали поле ввода, теряет фокус каждого элемента выбора.

или:

Вы можете использовать элемент css3 zoom (Источник)

Firefox не позволяет масштабировать браузер, потому что вы не можете получить доступ к свойствам пользователя через javascript или sth.

Итак, вы можете просто использовать некоторые стили CSS, которые позволяют масштабировать (CSS3: увеличение, как упоминалось выше) или увеличить размер текста! Например, вы можете использовать другой CSS файл. Но здесь у вас есть "неуклюжая" проблема, потому что стилизованные элементы css (плавающие и т.д.) Должны "взаимодействовать" по-разному по сути своих атрибутов.

Значок, который я опубликовал выше, хорошо работает в Chrome и IE8 + (FF не поддерживается, как указано)

- Дополнительная информация:

Здесь приведен пример того, как точно масштабировать параметр масштабирования. Пример приложения можно найти здесь

Функция масштабирования обычно обрабатывает масштаб, как делает ваш браузер!

Но это все еще все, что не поддерживается Firefox, а может быть, Safari и Opera? В Chrome и IE он работает!

Другим решением будет следующее: поместите ваши основные размеры в "em", а затем обходите, установив размеры как 100%, 110% (по всему css). Таким образом, вы можете иметь разные CSS файлы, а "просто" нужно заменить атрибуты%!

Но я не думаю, что могут быть другие решения!:(

Ответ 2

Вот мое решение с использованием CSS transform: scale() и JavaScript/jQuery:

<!-- Trigger -->
<ul id="zoom_triggers">
    <li><a id="zoom_in">zoom in</a></li>
    <li><a id="zoom_out">zoom out</a></li>
    <li><a id="zoom_reset">reset zoom</a></li>
</ul>

<script>
    jQuery(document).ready(function($)
    {
        // Set initial zoom level
        var zoom_level=100;

        // Click events
        $('#zoom_in').click(function() { zoom_page(10, $(this)) });
        $('#zoom_out').click(function() { zoom_page(-10, $(this)) });
        $('#zoom_reset').click(function() { zoom_page(0, $(this)) });

        // Zoom function
        function zoom_page(step, trigger)
        {
            // Zoom just to steps in or out
            if(zoom_level>=120 && step>0 || zoom_level<=80 && step<0) return;

            // Set / reset zoom
            if(step==0) zoom_level=100;
            else zoom_level=zoom_level+step;

            // Set page zoom via CSS
            $('body').css({
                transform: 'scale('+(zoom_level/100)+')', // set zoom
                transformOrigin: '50% 0' // set transform scale base
            });

            // Adjust page to zoom width
            if(zoom_level>100) $('body').css({ width: (zoom_level*1.2)+'%' });
            else $('body').css({ width: '100%' });

            // Activate / deaktivate trigger (use CSS to make them look different)
            if(zoom_level>=120 || zoom_level<=80) trigger.addClass('disabled');
            else trigger.parents('ul').find('.disabled').removeClass('disabled');
            if(zoom_level!=100) $('#zoom_reset').removeClass('disabled');
            else $('#zoom_reset').addClass('disabled');
        }
    });
</script>

Ответ 3

Я сделал это с jquery, работает с Firefox, Safari, Chrome и IE9 +:

window.onload = function() {
var currFFZoom = 1;
var currIEZoom = 100;

$('#In').on('click',function(){
    if (navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6){//Firefox
        var step = 0.02;
        currFFZoom += step; 
        $('body').css('MozTransform','scale(' + currFFZoom + ')');
    } else {
        var step = 2;
        currIEZoom += step;
        $('body').css('zoom', ' ' + currIEZoom + '%');
    }
});

$('#Out').on('click',function(){
    if (navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6){//Firefox
        var step = 0.02;
        currFFZoom -= step;                 
        $('body').css('MozTransform','scale(' + currFFZoom + ')');

    } else {
        var step = 2;
        currIEZoom -= step;
        $('body').css('zoom', ' ' + currIEZoom + '%');
    }
});};


<input type="button" id="Out" alt="Zoom Out"/>
<input type="button" id="In" alt="Zoom In"/>