jQuery Plugin pour simuler le zoom de page de navigateur / zoom de texte?

Définissez contentWidth sur la largeur visible minimale requirejse.

 jQuery(document).ready(function(){ jQuery(window).bind('resize load', function(){ contentWidth = 1010; jQuery('body').css('zoom', jQuery(window).width() / contentWidth); }); }); 

Testé avec Chrome.

Si vous recherchez un zoom sur le texte, le moyen le plus simple consiste à spécifier la taille de la police de base de votre body en unité absolue, par exemple body { font-size: 13pt; } body { font-size: 13pt; } et .postTitle { font-size: 120%; } tout le rest à utiliser des unités relatives, par exemple .postTitle { font-size: 120%; } .postTitle { font-size: 120%; } .

Ensuite, si vous avez des liens de zoom +/- ou autre:

 $ ('# enlargeText'). click (function () {
     $ (document.body) .css ('taille de la police', $ (document.body) .css ('taille de la police') * 1,5);
 }

Cela augmentera toutes les tailles de police relatives au body .

Toutefois, si vous souhaitez simuler un zoom de page (par opposition à un zoom de texte), vous devez également spécifier les dimensions de l’image en unités relatives ou parcourir en boucle toutes les images et les redimensionner en conséquence:

 $ ('# enlargeText'). click (function () {
     $ ('img'). each (function () {
         this.width * = 1.5;
     })
 }

Mais vous êtes toujours bloqué par les images d’arrière-plan CSS, qui n’ont pas été redimensionnées. Autant que je sache, cela n’est possible qu’avec CSS 3 peu pris en charge ou avec des versions redimensionnées de toutes ces images sur le serveur. Vous pouvez alors simplement activer une nouvelle feuille de style faisant référence à ces images plus grandes / plus petites.

Vous pouvez le faire comme ça. Cependant, il doit être connecté à un cookie pour les pages suivantes.

 var currZoom = $("body").css("zoom"); if(currZoom == 'normal') currZoom=1; // For IE $(".zoomIn").click(function(){ currZoom*=1.2; $("body").css("zoom",currZoom); }); $(".zoomOff").click(function(){ jQuery("body").css("zoom",1); }); $(".zoomOut").click(function(){ currZoom*=.8; $("body").css("zoom",currZoom); }); 

HTML

 A A A