Thay đổi mức thu phóng của trình duyệt

Tôi cần tạo 2 nút trên trang web của mình để thay đổi mức thu phóng của trình duyệt (+) (-). Tôi đang yêu cầu thu phóng trình duyệt chứ không phải thu phóng css vì các vấn đề về bố cục và kích thước hình ảnh.

Chà, điều này có khả thi không? Tôi đã nghe các báo cáo mâu thuẫn.

Tôi sẽ nói rằng không thể thực hiện được trong hầu hết các trình duyệt, ít nhất là không có một số plugin bổ sung. Và trong mọi trường hợp, tôi sẽ cố gắng tránh phụ thuộc vào khả năng thu phóng của trình duyệt vì cách triển khai khác nhau (một số trình duyệt chỉ thu phóng phông chữ, những trình duyệt khác cũng thu phóng hình ảnh, v.v.). Trừ khi bạn không quan tâm nhiều đến trải nghiệm người dùng.

Nếu bạn cần thu phóng đáng tin cậy hơn, thì hãy cân nhắc việc thu phóng phông chữ và hình ảnh của trang bằng JavaScript và CSS hoặc có thể ở phía máy chủ. Các vấn đề về tỷ lệ hình ảnh và bố cục có thể được giải quyết theo cách này. Tất nhiên, điều này đòi hỏi phải làm việc nhiều hơn một chút.

Có thể sử dụng trong IE và chrome mặc dù nó không hoạt động trong firefox:

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

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

Hãy thử nếu điều này làm việc cho bạn. Điều này hoạt động trên FF, IE8 + và chrome. Phần khác áp dụng cho các trình duyệt không phải firefox. Mặc dù điều này mang lại cho bạn hiệu ứng thu phóng, nhưng nó không thực sự sửa đổi giá trị thu phóng ở cấp trình duyệt.

    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 + '%');
        }
    });

Bạn có thể sử dụng chức năng thu phóng CSS3 , nhưng tôi chưa thử nghiệm nó với jQuery. Sẽ thử ngay bây giờ và cho bạn biết. CẬP NHẬT: đã thử nghiệm, hoạt động nhưng rất vui

Tôi không thể tìm cách thay đổi mức thu phóng thực tế của trình duyệt, nhưng bạn có thể tiến gần hơn với CSS biến đổi: scale (). Đây là giải pháp của tôi dựa trên JavaScript và 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>

như câu trả lời được chấp nhận đã đề cập, bạn có thể phóng to từng thuộc tính fontSize css của phần tử trong DOM, mã sau để bạn tham khảo.

 <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>

Không thể thực hiện được trong IE, vì nút Thu phóng giao diện người dùng trên thanh trạng thái không thể tập lệnh. YMMV cho các trình duyệt khác.

<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>

trong Firefox sẽ không thay đổi tỷ lệ thu phóng chỉ thay đổi !!!