Зміна рівня масштабування браузера

Мені потрібно створити на своєму сайті 2 кнопки, які б змінили рівень масштабування браузера (+) (-). Я вимагаю збільшення масштабування браузера, а не масштабування css через проблеми з розміром зображення та компонуванням.

Ну, чи можливо це взагалі? Я чув суперечливі повідомлення.

Я б сказав, що це неможливо в більшості браузерів, принаймні не без додаткових плагінів. І в будь-якому випадку я б намагався уникати масштабування браузера, оскільки зміни відрізняються (деякі браузери збільшують лише шрифти, інші масштабують зображення тощо). Якщо ви не дуже дбаєте про досвід користувачів.

Якщо вам потрібен більш надійний масштаб, то розгляньте масштабування шрифтів та зображень сторінки за допомогою JavaScript та CSS або, можливо, на стороні сервера. Проблеми масштабування зображення та макета можна вирішити таким чином. Звичайно, для цього потрібно трохи більше працювати.

Можливо в IE та chrome, хоча це не працює у firefox:

<script>
   function toggleZoomScreen() {
       document.body.style.zoom = "80%";
   } 
</script>

<img src="example.jpg" alt="example" onclick="toggleZoomScreen()">

Спробуйте, якщо це працює для вас. Це працює на FF, IE8 + та chrome. Інша частина стосується браузерів, які не мають Firefox. Хоча це дає ефект збільшення, він фактично не змінює значення масштабу на рівні браузера.

    var currFFZoom = 1;
    var currIEZoom = 100;

    $('#plusBtn').on('click',function(){
        if ($.browser.mozilla){
            var step = 0.02;
            currFFZoom += step; 
            $('body').css('MozTransform','scale(' + currFFZoom + ')');
        } else {
            var step = 2;
            currIEZoom += step;
            $('body').css('zoom', ' ' + currIEZoom + '%');
        }
    });

    $('#minusBtn').on('click',function(){
        if ($.browser.mozilla){
            var step = 0.02;
            currFFZoom -= step;                 
            $('body').css('MozTransform','scale(' + currFFZoom + ')');

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

Ви можете використовувати функцію збільшення CSS3 , але я ще не перевіряв її на jQuery. Спробуй зараз і повідомимо про це. ОНОВЛЕННЯ: перевірено, працює, але це весело

Не вдалося знайти спосіб змінити фактичний рівень масштабування браузера, але ви можете досить близько наблизитись до 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>

як згадуваний прийнятий відповідь, ви можете збільшити атрибут fontSize css елемента в DOM один за одним, наступний код для вашої довідки.

 <script>
    var factor = 1.2;
    var all = document.getElementsByTagName("*");
    for (var i=0, max=all.length; i < max; i++) {
        var style = window.getComputedStyle(all[i]);
        var fontSize = style.getPropertyValue('font-size');

        if(fontSize){
            all[i].style.fontSize=(parseFloat(fontSize)*factor)+"px";
        }
        if(all[i].nodeName === "IMG"){
            var width=style.getPropertyValue('width');
            var height=style.getPropertyValue('height');
            all[i].style.height = (parseFloat(height)*factor)+"px";
            all[i].style.width = (parseFloat(width)*factor)+"px";
        }
    }
</script>

Не можливо в IE, оскільки кнопка масштабування користувальницького інтерфейсу на панелі стану не є можливою. YMMV для інших браузерів.

<html>
  <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
        var currFFZoom = 1;
        var currIEZoom = 100;

        function plus(){
            //alert('sad');
                var step = 0.02;
                currFFZoom += step;
                $('body').css('MozTransform','scale(' + currFFZoom + ')');
                var stepie = 2;
                currIEZoom += stepie;
                $('body').css('zoom', ' ' + currIEZoom + '%');

        };
        function minus(){
            //alert('sad');
                var step = 0.02;
                currFFZoom -= step;
                $('body').css('MozTransform','scale(' + currFFZoom + ')');
                var stepie = 2;
                currIEZoom -= stepie;
                $('body').css('zoom', ' ' + currIEZoom + '%');
        };
    </script>
    </head>
<body>
<!--zoom controls-->
                        <a id="minusBtn" onclick="minus()">------</a>
                        <a id="plusBtn" onclick="plus()">++++++</a>
  </body>
</html>

в Firefox не змінить масштабування, тільки змінить масштаб !!!