Zmiana poziomu powiększenia przeglądarki


105

Muszę utworzyć 2 przyciski w mojej witrynie, które zmieniłyby poziom powiększenia przeglądarki (+) (-). Proszę o powiększenie przeglądarki, a nie powiększenie css z powodu problemów z rozmiarem obrazu i układem.

Cóż, czy to w ogóle możliwe? Słyszałem sprzeczne raporty.


8
Zoom przeglądarki powinien być kontrolowany tylko przez użytkownika - nigdy przez witrynę internetową. Jeśli witryna internetowa może zmienić poziom powiększenia przeglądarki, łamie to najbardziej podstawową funkcję ułatwień dostępu, jaką mają przeglądarki. Uznałbym każdą metodę pozwalającą witrynie internetowej na zmianę powiększenia przeglądarki za poważny błąd, ponieważ jakiekolwiek użycie tej funkcji byłoby nadużyciem.
user57368

37
@unknown (google), bzdury. Po prostu bardzo się mylisz. Takie elementy sterujące są nieocenione przy tworzeniu rozbudowanych aplikacji internetowych w języku JavaScript, które mogą mierzyć aż do flashowania, a po drugie przeglądarki mogą ograniczyć sterowanie powiększeniem, aby były dostępne tylko przy interakcji z użytkownikiem i nie zapewniały pełnej kontroli.
Jourkey

102
Naprawdę mam dość tego całego „nigdy nie powinieneś XYZ”. Tak, wszystko dobrze w idealnym świecie lub gdy piszesz zupełnie nową witrynę. Ale jeśli witryna ma dziesięć lat, klient nie zapłaci za nowy projekt, a szefowie oczekują, że strona będzie działać na tablecie, taka mentalność „naprawdę nie powinnaś” może poważnie cofnąć -siedzenie. Jeśli wiesz, jak coś zrobić, powiedz to. Jeśli nie, nie komentuj. Wchodzenie na fora, na których wyrzucane są pedantyczne bzdury, jest nieprzydatne, a właściwie dość niegrzeczne.
Nathan Crause

5
stary post, ale jest różnica między „nigdy nie powinieneś” a „przeglądarka nie powinna zezwalać”. Właśnie dlatego, że twórcy stron internetowych przesuwają granice, programiści przeglądarek muszą wprowadzać ograniczenia, dla dobra użytkowników. W przeciwnym razie nadal bylibyśmy w sieci niestandardowych, kolorowych pasków przewijania i podczas ładowania potrząsanego okna.
Olivvv

1
Stare odrodzenie, ale cholernie gorąco dziękuję @NathanCrause! Dochodzę do punktu, w którym muszę zwolnić funkcje ułatwień dostępu, ponieważ niektórzy użytkownicy również nie widzą, a brak możliwości zmiany powiększenia przeglądarki utrudnia mi życie. CSS Zoom po prostu nie działa dobrze z interfejsem jquery
DdD,

Odpowiedzi:


41

Powiedziałbym, że nie jest to możliwe w większości przeglądarek, a przynajmniej nie bez dodatkowych wtyczek. W każdym razie starałbym się uniknąć polegania na powiększeniu przeglądarki, ponieważ implementacje są różne (niektóre przeglądarki powiększają tylko czcionki, inne powiększają również obrazy itp.). Chyba że nie obchodzi Cię zbytnio wrażenia użytkownika.

Jeśli potrzebujesz bardziej niezawodnego powiększenia, rozważ powiększenie czcionek strony i obrazów za pomocą JavaScript i CSS lub ewentualnie po stronie serwera. W ten sposób można rozwiązać problemy ze skalowaniem obrazu i układu. Oczywiście wymaga to nieco więcej pracy.


33

Możliwe w IE i Chrome, chociaż nie działa w Firefox:

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

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

9
Jourkey wyraźnie poprosił o powiększenie bez CSS.
kmkaplan

3
To po prostu zmiana wartości powiększenia CSS w treści, co robi dokładnie odwrotnie niż w zadanym pytaniu.
mystrdat

Nie zapominaj, że ten stan powiększenia prawdopodobnie musi być trwale zapisywany i zarządzany w zmiennej sesji oraz odtwarzany przy każdym ładowaniu strony.
Michael Blankenship

29

Spróbuj, czy to działa dla Ciebie. Działa to na FF, IE8 + i Chrome. Pozostała część dotyczy przeglądarek innych niż Firefox. Chociaż daje to efekt powiększenia, w rzeczywistości nie zmienia wartości powiększenia na poziomie przeglądarki.

    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
musisz mieć wtyczkę do migracji jquery 1.8.3 lub jquery (aby używać $
.browser

24
To jest powiększanie CSS
HelloWorld

Dla spójności, w przypadku MozTransform, ustaw pochodzenie:
Joel Teply

W dzisiejszych czasach powinieneś mieć możliwość ustawienia transform: scale(..)we wszystkich przeglądarkach. MozTransformnie istnieje nawet w obecnych wersjach przeglądarki Firefox.
Hielke Walinga

11

Możesz użyć funkcji zoom CSS3 , ale nie testowałem jej jeszcze z jQuery. Spróbuję teraz i dam znać. UPDATE: przetestowałem, działa, ale jest fajnie


tak, całkowicie nie. Masz pomysł na cross-browser? AKTUALIZACJA: nie ma potrzeby, po prostu sprawdziłem powyższy post! okrzyki
obzenner

Wydaje się, że działa w Chrome i Safari, ale nie w Firefoksie.
Ansjovis86

Zepsuty w iPadzie OS Safari
leroyjenkinss24

2

Nie mogłem znaleźć sposobu, aby zmienić rzeczywisty poziom powiększenia przeglądarki, ale możesz być całkiem blisko dzięki transformacji CSS: scale (). Oto moje rozwiązanie oparte na JavaScript i 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

zgodnie z akceptowaną odpowiedzią wspomniano, możesz powiększyć atrybut css fontSize elementu w DOM jeden po drugim, poniższy kod w celach informacyjnych.

 <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

Niemożliwe w IE, ponieważ przycisk UI Zoom na pasku stanu nie obsługuje skryptów. YMMV dla innych przeglądarek.


jest to możliwe w IE window.parent.document.body.style.zoom = 1.5;
Mustafa Ekici

8
Oryginalny plakat konkretnie prosi o „nie zoom CSS”.
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>

w przeglądarce Firefox nie zmieni powiększenia tylko zmieni skalę !!!


3
Po raz kolejny jest to powiększanie CSS , co jest niepożądane w tym pytaniu.
John Weisz,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.