Modification du niveau de zoom du navigateur


105

J'ai besoin de créer 2 boutons sur mon site qui changeraient le niveau de zoom du navigateur (+) (-). Je demande un zoom du navigateur et non un zoom css en raison de problèmes de taille et de mise en page de l'image.

Eh bien, est-ce encore possible? J'ai entendu des rapports contradictoires.


8
Le zoom du navigateur est quelque chose qui ne devrait être contrôlé que par l'utilisateur - jamais le site Web. Si le site Web peut modifier le niveau de zoom du navigateur, cela rompt la fonction d'accessibilité la plus élémentaire des navigateurs. Je considérerais toute méthode permettant à un site Web de modifier le zoom du navigateur comme un bogue sérieux, car toute utilisation de cette fonctionnalité serait un abus.
user57368

37
@unknown (google), absurde. Vous avez tout simplement tort. Ces contrôles sont inestimables pour créer des applications Web riches en javascript qui peuvent mesurer jusqu'à Flash, et deuxièmement, les navigateurs peuvent limiter les contrôles de zoom pour être disponibles uniquement avec l'interaction de l'utilisateur et ne pas donner un contrôle total.
Jourkey

103
Je suis vraiment fatigué de l'ensemble "vous ne devriez jamais XYZ". Ouais, c'est bien beau dans un monde parfait, ou lorsque vous écrivez un tout nouveau site. Mais si le site a dix ans, le client ne paiera pas pour un nouveau design, et vos patrons s'attendent à ce que vous fassiez fonctionner un site sur une tablette, ce genre de mentalité "vous ne devriez vraiment pas" peut prendre un sérieux coup de pouce. -siège. Si vous savez comment faire quelque chose, dites-le. Sinon, ne commentez pas. Venir sur des forums jaillissant d'absurdités pédantes est inutile et en fait assez impoli.
Nathan Crause

5
ancien message mais il y a une différence entre "vous ne devriez jamais" et "le navigateur ne devrait pas autoriser". C'est précisément parce que les développeurs web repoussent les limites, que les développeurs de navigateurs doivent mettre des limites en place, pour le bien des utilisateurs. Sinon, nous serions toujours dans un réseau de barres de défilement colorées personnalisées et de chargement de secouer la fenêtre.
Olivvv

1
Vieux revivre mais chaud putain de merci @NathanCrause! J'arrive au point où je dois libérer la fonctionnalité d'accessibilité, car certains utilisateurs ne peuvent pas non plus voir, et ne pas pouvoir modifier le zoom du navigateur me rend la vie difficile. CSS Zoom ne fonctionne tout simplement pas bien avec jquery ui
DdD

Réponses:


41

Je dirais pas possible dans la plupart des navigateurs, du moins pas sans quelques plugins supplémentaires. Et dans tous les cas, j'essaierais d'éviter de me fier au zoom du navigateur car les implémentations varient (certains navigateurs ne zooment que sur les polices, d'autres zooment sur les images, etc.). Sauf si vous ne vous souciez pas beaucoup de l'expérience utilisateur.

Si vous avez besoin d'un zoom plus fiable, envisagez de zoomer sur les polices et les images de la page avec JavaScript et CSS, ou éventuellement côté serveur. Les problèmes de mise à l'échelle de l'image et de la mise en page pourraient être résolus de cette manière. Bien sûr, cela nécessite un peu plus de travail.


33

Possible dans IE et Chrome bien que cela ne fonctionne pas sous Firefox:

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

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

9
Jourkey a explicitement demandé un zoom non CSS.
kmkaplan

3
Il s'agit simplement de changer la valeur de zoom CSS en ligne sur le corps, ce qui fait exactement le contraire de ce que la question a posée.
mystrdat

N'oubliez pas que cet état de zoom doit probablement être enregistré et géré de manière persistante dans une variable de session et relu à chaque chargement de page.
Michael Blankenship

29

Essayez si cela fonctionne pour vous. Cela fonctionne sur FF, IE8 + et chrome. L'autre partie s'applique aux navigateurs non-Firefox. Bien que cela vous donne un effet de zoom, cela ne modifie pas réellement la valeur de zoom au niveau du navigateur.

    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
vous devez avoir jquery 1.8.3 ou jquery migrate plugin (pour utiliser $ .browser)
jave.web

24
Ceci est un zoom CSS
HelloWorld

Par souci de cohérence, dans le cas de MozTransform, définissez l'origine:
Joel Teply

De nos jours, vous devriez simplement pouvoir configurer transform: scale(..)dans tous les navigateurs. MozTransformn'existe pas même dans les versions actuelles de Firefox.
Hielke Walinga

11

Vous pouvez utiliser la fonction de zoom CSS3 , mais je ne l'ai pas encore testée avec jQuery. Je vais essayer maintenant et vous le faire savoir. MISE À JOUR: testé, fonctionne mais c'est amusant


ouais, pas du tout. Une idée de cross-browser? MISE À JOUR: pas besoin, il suffit de vérifier le post ci-dessus! cheers
obzenner

Semble fonctionner dans Chrome et Safari, mais pas Firefox.
Ansjovis86

Cassé dans iPad OS Safari
leroyjenkinss24

2

Je n'ai pas pu trouver un moyen de modifier le niveau de zoom réel du navigateur, mais vous pouvez vous en rapprocher avec CSS transform: scale (). Voici ma solution basée sur JavaScript et 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

comme réponse acceptée mentionnée, vous pouvez agrandir l'attribut fontSize css de l'élément dans DOM un par un, le code suivant pour votre référence.

 <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

Impossible dans IE, car le bouton Zoom de l'interface utilisateur dans la barre d'état n'est pas scriptable. YMMV pour les autres navigateurs.


c'est possible dans IE window.parent.document.body.style.zoom = 1.5;
Mustafa Ekici

8
L'affiche originale demande spécifiquement "pas de 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>

dans Firefox ne changera pas le zoom seulement changer l'échelle !!!


3
Encore une fois, il s'agit du zoom CSS , ce qui n'est pas souhaitable par la question.
John Weisz
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.