Javascript Girl
  1. Javascript Girl
  3. Diminuer tout le site en utilisant jQuery ou CSS
Intereting Posts
Convertir un tableau d'objets en objets avec des clés Dojo dialogue fermer événement sur X (en haut à droite) Comment les navigateurs font-ils une pause / modifient-ils Javascript lorsque l'onglet ou la fenêtre n'est pas actif? Traitement des trames dans WebDriver IO Insérer du texte au curseur dans un div Récolter plusieurs URL en bouclant PhantomJS NaN est-il égal à NaN? ResponseXML toujours nul Pour faire pivoter une image dans un canevas en utilisant la souris À quelle utilisation le javascript pour chaque méthode a-t-il (cette carte ne peut-elle pas faire)? Où trouver le cookie Facebook? Require.js ignorant baseUrl Ember.js – jQuery-maçonnerie + défilement infini Pourquoi ne puis-je pas utiliser des caractères accentués à côté d'une limite de mots? Événement DOM déclenché par changement de fenêtre

Diminuer tout le site en utilisant jQuery ou CSS

J'aimerais que mon site soit réduit de 80%. C'est-à-dire réduire les images, les polices, tout à 80% de sa taille actuelle. Existe-t-il un moyen de le faire en utilisant jQuery ou CSS?

J'ai essayé le body { zoom:80% } mais ça marche uniquement pour Chrome.

Merci

Solution CSS: 

 body { -moz-transform: scale(0.8, 0.8); /* Moz-browsers */ zoom: 0.8; /* Other non-webkit browsers */ zoom: 80%; /* Webkit browsers */ }

Prise en charge de tous les principaux navigateurs http://caniuse.com/#feat=css-zoom

Pour Firefox, le repli est l'échelle de transformation http://caniuse.com/#feat=transforms2d

Voici une solution plus flexible 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; var scale = zoom_level / 100; // Set page zoom via CSS $('body').css({ -moz-transform: scale(scale, scale); /* Moz-browsers */ transform: 'scale('+(scale)+')', // 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>