web-dev-qa-db-fra.com

imiter le zoom du navigateur avec JavaScript

Comment est-il possible de faire un zoom arrière sur un document entier avec JavaScript?

Mon objectif est d’imiter le zoom intégré du navigateur et de zoomer l’ensemble du document à 90%.

J'ai essayé d'utiliser

document.body.zoom

Cela fonctionne uniquement avec Explorer et la page est en désordre (beaucoup d'éléments bougent).

Y a-t-il un moyen de faire cela?

javascriptzoom
15
lior r

Voilà:

Utilisation: 

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

1,0 signifie 100%

150% serait 1.5 1000% serait 10.0

this.blur () signifie que le curseur, peut-être que vous avez sélectionné un champ de saisie, perd le focus de chaque élément sélectionné. 

ou: 

Vous pouvez utiliser l'élément css3 zoom ( Source )

Firefox n'autorise pas le zoom avec le navigateur car vous ne pouvez pas accéder aux propriétés de l'utilisateur via javascript ou sth.

Vous pouvez donc simplement utiliser certains styles CSS qui permettent de zoomer (CSS3: zoom, comme mentionné ci-dessus) ou d'augmenter la taille du texte! Ce que vous pourriez faire en incluant un fichier CSS différent, par exemple. Mais ici, vous avez le problème "instable", car les éléments css stylés (flottés, etc.) doivent "interagir" de manière différente de leurs attributs. 

Le zoom que j'ai posté ci-dessus fonctionne bien dans Chrome et IE8 + (FF non pris en charge, comme mentionné)

--Information additionnelle:

Ici est un exemple de la manière de zoomer exactement avec l'option zoom . Un exemple d'application est disponible ici

L'option de zoom gère normalement le zoom comme votre navigateur!

Mais il s’agit toujours de tout ce qui n’est pas supporté par Firefox, ou peut-être Safari & Opera? En chrome et IE ça marche!

Une autre solution serait la suivante: Placez vos tailles principales dans "em", puis contournez-la en définissant des tailles telles que 100%, 110% (sur tout le fichier css). Donc, vous pourriez avoir des fichiers CSS différents, et "juste" besoin de remplacer les attributs%! 

Pourtant, je ne pense pas qu'il pourrait y avoir d'autres solutions! :( 

18
creativeby

Voici ma solution utilisant la transformation CSS: scale () et 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
Bogdanio

Je l'ai fait avec jquery, fonctionne avec Firefox, Safari, Chrome et 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"/>
1
Rafael González