Mengubah tingkat zoom browser


104

Saya perlu membuat 2 tombol di situs saya yang akan mengubah tingkat zoom browser (+) (-). Saya meminta zoom browser dan bukan zoom css karena masalah ukuran gambar dan tata letak.

Nah, apakah ini mungkin? Saya pernah mendengar laporan yang bertentangan.


8
Zoom browser adalah sesuatu yang seharusnya hanya dikontrol oleh pengguna - bukan situs web. Jika situs web dapat mengubah tingkat zoom browser, itu merusak fitur aksesibilitas paling dasar yang dimiliki browser. Saya akan menganggap metode apa pun yang mengizinkan situs web mengubah zoom browser sebagai bug serius, karena penggunaan fitur itu akan disalahgunakan.
pengguna57368

37
@unknown (google), tidak masuk akal. Anda sangat salah. Kontrol tersebut sangat berharga untuk membuat aplikasi web yang kaya dalam javascript yang dapat mengukur hingga flash, dan kedua browser dapat membatasi kontrol zoom agar hanya tersedia dengan interaksi pengguna dan tidak memberikan kontrol penuh.
Jourkey

101
Saya benar-benar bosan dengan keseluruhan "Anda tidak boleh XYZ". Ya, itu semua baik dan bagus di dunia yang sempurna, atau saat Anda menulis situs baru. Namun jika situs tersebut sudah berumur satu dekade, klien tidak akan membayar untuk desain baru, dan atasan Anda mengharapkan Anda membuat situs berfungsi di tablet, mentalitas "Anda seharusnya tidak boleh" seperti itu dapat mengambil tindakan serius. -kursi. Jika Anda tahu bagaimana melakukan sesuatu, katakan saja. Jika tidak, jangan berkomentar. Masuk ke forum yang mengatakan omong kosong tidak masuk akal tidak membantu, dan sebenarnya cukup kasar.
Nathan Crause

5
posting lama tetapi ada perbedaan antara "Anda tidak boleh" dan "browser tidak boleh mengizinkan". Justru karena pengembang web sedang mendorong batas, pengembang peramban harus menempatkan batasan, demi kebaikan pengguna. Jika tidak, kami masih akan berada di web bilah gulir warna-warni yang disesuaikan dan onload goyangan-jendela.
Olivvv

1
Bangkit tua tapi panas sekali terima kasih @NathanCrause! Saya sampai pada titik di mana saya perlu melepaskan fungsionalitas Aksesibilitas karena beberapa pengguna juga tidak dapat melihat, dan tidak dapat mengubah zoom browser membuat hidup saya sulit. CSS Zoom tidak berfungsi dengan baik dengan jquery ui
DdD

Jawaban:


40

Saya akan mengatakan tidak mungkin di sebagian besar browser, setidaknya tidak tanpa beberapa plugin tambahan. Dan bagaimanapun, saya akan mencoba untuk menghindari mengandalkan zoom browser karena implementasinya bervariasi (beberapa browser hanya memperbesar font, yang lain memperbesar gambar, juga dll). Kecuali Anda tidak terlalu peduli dengan pengalaman pengguna.

Jika Anda membutuhkan zoom yang lebih andal, pertimbangkan untuk memperbesar font dan gambar halaman dengan JavaScript dan CSS, atau mungkin di sisi server. Masalah skala gambar dan tata letak dapat diatasi dengan cara ini. Tentu saja, ini membutuhkan lebih banyak pekerjaan.


31

Mungkin di IE dan chrome meskipun tidak berfungsi di firefox:

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

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

9
Jourkey secara eksplisit meminta zoom non CSS.
kmkaplan

3
Ini hanya mengubah nilai zoom CSS sebaris pada body, yang melakukan kebalikan dari apa yang ditanyakan.
mystrdat

Jangan lupa bahwa status zoom ini mungkin perlu disimpan dan dikelola secara terus-menerus dalam variabel sesi dan diputar ulang setiap pemuatan halaman.
Michael Blankenship

29

Coba jika ini berhasil untuk Anda. Ini berfungsi di FF, IE8 + dan chrome. Bagian lain berlaku untuk browser non-firefox. Meskipun ini memberi Anda efek zoom, sebenarnya ini tidak mengubah nilai zoom di tingkat browser.

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

1
Anda harus memiliki plugin jquery 1.8.3 atau jquery migrate (untuk menggunakan $ .browser)
jave.web

24
Ini adalah pembesaran CSS
HelloWorld

Untuk konsistensi, dalam kasus MozTransform, tetapkan asal:
Joel Teply

Saat ini Anda hanya dapat menyetel transform: scale(..)di semua browser. MozTransformtidak ada bahkan di versi Firefox saat ini.
Hielke Walinga

10

Anda dapat menggunakan fungsi zoom CSS3 , tetapi saya belum mengujinya dengan jQuery. Akan mencoba sekarang dan memberi tahu Anda. UPDATE: mengujinya, berfungsi tetapi menyenangkan


ya, sama sekali tidak. Ada ide untuk lintas browser? UPDATE: tidak perlu, cukup cek postingan di atas! tepuk tangan
obzenner

Tampaknya berfungsi di Chrome dan Safari, tetapi tidak di Firefox.
Ansjovis86

Rusak di iPad OS Safari
leroyjenkinss24

2

Saya tidak dapat menemukan cara untuk mengubah tingkat zoom browser yang sebenarnya, tetapi Anda bisa mendekati transformasi CSS: scale (). Inilah solusi saya berdasarkan JavaScript dan 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>

2

sebagai jawaban yang diterima disebutkan, Anda dapat memperbesar atribut fontSize css elemen di DOM satu per satu, kode berikut untuk referensi Anda.

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

1

Tidak mungkin di IE, karena tombol Zoom UI di bilah status tidak dapat ditulis. YMMV untuk browser lain.


yang mungkin di IE window.parent.document.body.style.zoom = 1,5;
Mustafa Ekici

8
Poster asli secara khusus meminta "bukan CSS zoom".
i_am_jorf

0

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

di Firefox tidak akan mengubah zoom hanya mengubah skala !!!


3
Sekali lagi, ini adalah pembesaran CSS , yang tidak diinginkan oleh pertanyaan tersebut.
John Weisz
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.