Comment puis-je mettre à l'échelle une page Web entière avec CSS?


153

En utilisant Firefox, vous pouvez agrandir une page Web entière en appuyant simplement sur CTRL +. Cela permet d'agrandir proportionnellement la page Web entière (polices, images, etc.).

Comment puis-je répliquer la même fonctionnalité en utilisant simplement CSS?

Y a-t-il quelque chose comme page-size: 150%(qui augmenterait les portions de page entières de x%?)


7
La fonction de zoom de page de Firefox apparaît dans tous les navigateurs modernes - la répliquer semble plutôt inutile.
Quentin

1
Je suis d'accord avec David. Il semble un peu inutile de reproduire cela puisque les navigateurs ont maintenant cette fonctionnalité intégrée ....
utilisateur

5
ce serait en fait une fonctionnalité incroyablement utile pour les appareils mobiles. De nombreux téléphones augmentent désormais leur PPI sans tenir compte de la différence (à part l'iPhone4, bien sûr).
DA.

38
Il ne le reproduit pas. Cela peut être utile pour quelque chose comme un aperçu de page / élément dans un div incorporé.
RichieHH

3
Le concepteur de page doit pouvoir définir un zoom par défaut pour sa page. J'ai une page qui était grande quand je l'ai faite, mais petite maintenant à cause des affichages haute résolution: lonniebest.com/CardTrick Au lieu de refaire la page, j'aimerais être zoomée par défaut.
Lonnie Best

Réponses:


182

Vous pourrez peut-être utiliser la zoompropriété CSS - prise en charge dans IE 5.5+, Opera, Safari 4 et Chrome

Puis-je utiliser: zoom css

Firefox est le seul navigateur majeur qui ne prend pas en charge Zoom ( élément bugzilla ici ) mais vous pouvez utiliser la propriété "propriétaire" -moz-transform dans Firefox 3.5 .

Vous pouvez donc utiliser:

div.zoomed { 
    zoom: 3; 
    -moz-transform: scale(3); 
    -moz-transform-origin: 0 0;
} 

1
La propriété de zoom propriétaire n'est prise en charge que par IE. reference.sitepoint.com/css/zoom#compatibilitysection
Quentin

15
David, cette référence est très obsolète - regardez les versions de navigateur qu'elle répertorie. CSS Zoom est pris en charge dans tous les principaux navigateurs actuels, à l'exception de Firefox. Et ce n'est pas plus propriétaire que n'importe laquelle des extensions CSS -moz-.
Jon Galloway

3
Remarque: je pense que les autres solutions qui ont été proposées - telles que la mise à l'échelle basée sur em et% - sont plus «pures» mais ne sont pas nécessairement pratiques sur la plupart des mises en page Web à moins que vous n'ayez construit de cette façon à partir de zéro.
Jon Galloway

1
J'ai testé Opera 10b2 et il ne semble pas le supporter. Firefox se comporte bizarrement la nuit (le fragment agrandi disparaît). IE5 / 6 sont bogués. Fonctionne correctement dans WebKit uniquement.
Kornel

2
merci jon, super info! dans firefox -moz-transform scale fonctionne en effet, mais selon votre cas d'utilisation, vous devrez peut-être corriger la position de l'élément en utilisant -moz-transform-origin (cfr. developer.mozilla.org/En/CSS/-moz-transform -origin )
futtta

81

C'est une réponse plutôt tardive, mais vous pouvez utiliser

body {
   transform: scale(1.1);
   transform-origin: 0 0;
   // add prefixed versions too.
}

pour agrandir la page de 110%. Bien que le zoomstyle soit là, Firefox ne le prend toujours pas en charge.

En outre, ceci est légèrement différent de votre zoom. Le css transformfonctionne comme un zoom d'image, il va agrandir votre page mais pas la cause refusion, etc.


Edit a mis à jour l'origine de la transformation.


1
Merci pour cela, mais vous avez besoin de points-virgules entre les déclarations. De plus, lorsque j'ai essayé cela, la page s'est déplacée vers la gauche, au-delà de la marge gauche, de sorte que la partie gauche de la page n'était plus visible. L'ajout des différentes déclarations correspondantes "... transform-origin: 0 0" a corrigé cela.
Dave Burton

oui, j'aurais dû mentionner que le contenu est découpé transform. Merci pour le commentaire.
kumarharsh

1
Je suis d'accord avec @Dave Burton: utiliser transform-origin: 0 0;fait ce que je veux. Par exemple, pour agrandir la page à 150%: transform: scale(1.5); transform-origin: 0 0;. Je crois que la bonne réponse de @kumar_harsh devrait être corrigée.
Kai Carver

@KaiCarver si vous utilisez cette méthode, cela entraînera toujours un découpage. Peu importe pour quel point vous utilisez transform-origin. Ce que j'ai écrit n'est qu'un exemple de la valeur à utiliser. Vous êtes bien sûr libre d'utiliser transform-origin: 0 0si cela convient à votre cas d'utilisation (ou si vous ne vous souciez pas de ce qu'il y a dans le coin inférieur droit)
kumarharsh

@AngularM pouvez-vous partager un extrait de code pour montrer le comportement? Je suis sûr qu'il y a une autre raison à cela.
kumarharsh

18

Si votre CSS est entièrement construit autour de exou d' emunités, cela pourrait être possible et faisable. Il vous suffit de déclarer font-size: 150%dans votre style pour bodyou html. Cela devrait entraîner une mise à l'échelle proportionnelle de toutes les autres longueurs. Cependant, vous ne pouvez pas redimensionner les images de cette façon, à moins qu'elles n'aient également un style.

Mais c'est un très gros si sur la plupart des sites, de toute façon.


3
Cela ne changerait que la taille de mes polices. La proposition CTRL + élargit également les largeurs, hauteurs et tailles d'image fixes.

2
Je sais, mais c'est aussi proche que possible avec du CSS pur. De plus, non seulement vos polices changent, mais tout ce dont les dimensions sont spécifiées comme un multiple de la taille de la police. Signification, tout ce que vous avez utilisé %, emou exunités.
Joey

1
Ce n'est tout simplement pas correct. J'ai testé la solution que j'ai listée ci-dessous (propriétés zoom + -moz-transform), et cela fonctionne sur FF3.5, IE6 +, Safari et Opera. Il met à l'échelle les images ainsi que le texte. Vous pouvez mettre à l'échelle des pages en CSS.
Jon Galloway

6

Comme le dit Johannes - pas assez de représentant pour commenter directement sa réponse - vous pouvez en effet le faire tant que les dimensions de tous les éléments sont spécifiées comme un multiple de la taille de la police. Cela signifie, tout ce où vous avez utilisé%, em ou ex unités". Bien que je pense que les% soient basés sur l'élément contenant, pas sur la taille de la police.

Et vous n'utiliseriez normalement pas ces unités relatives pour les images, étant donné qu'elles sont composées de pixels, mais il y a une astuce qui rend cela beaucoup plus pratique.

Si vous définissez body{font-size: 62.5%};alors 1em équivaudra à 10px. Autant que je sache, cela fonctionne sur tous les principaux navigateurs.

Ensuite, vous pouvez spécifier vos images carrées (par exemple) 100px avec width: 10em; height: 10em;et en supposant que la mise à l'échelle de Firefox est définie par défaut, les images auront leur taille naturelle.

Faire body{font-size: 125%};et tout - y compris les images - sera le double de la taille originale.


Je ne comprends pas, si je dis body {font-size: 62,5%; font-size: 125%} - comment cela définirait-il 1em comme étant 10px. Le navigateur pourrait-il simplement ignorer la première déclaration de taille de police et ensuite simplement faire 125% = 10px?

Je pense que vous avez mal compris. vous ne feriez pas les deux en même temps. 62,5 x2 = 125 ... pour montrer comment vous pouvez mettre les choses à l'échelle en ajustant la valeur.
Ape-inago

Oui. J'aurais dû dire "alors si vous utilisez Javascript pour définir le corps {font-size: 125%} tous les éléments de la page doubleront de taille".
e100 le

3

Avec ce code 1em ou 100% sera égal à 1% de la hauteur du corps

document.body.style.fontSize = ((window.innerHeight/100)*6.25)+"%"

2
 * {
transform: scale(1.1, 1.1)
}

cela transformera chaque élément de la page


1

Jon Tan a fait cela avec son site - http://jontangerine.com/ Tout, y compris les images, a été déclaré dans ems. Tout. C'est ainsi que l'effet souhaité est obtenu. Le zoom texte et le zoom d'écran donnent presque exactement le même résultat.


1

CSS ne pourra pas zoomer à la demande, mais si vous associez CSS à JS, vous pouvez modifier certaines valeurs pour agrandir la page. Cependant, comme on l'a dit, cette fonctionnalité est aujourd'hui standard dans les navigateurs modernes: pas besoin de la répliquer. En fait, sa réplication ralentira votre site Web (plus de choses à charger, plus de JS ou CSS à analyser ou exécuter et appliquer, etc.)


C'est une fonctionnalité de navigateur standard, mais l'ajout de la fonctionnalité directement sur le site signifie que vous n'avez pas à vous fier (1) à l'expertise de l'utilisateur avec le navigateur de son choix et (2) aux instructions spécifiques au navigateur
Ags1

1

J'ai le code suivant qui met à l'échelle la page entière via les propriétés CSS. L'important est de définir body.style.width à l'inverse du zoom pour éviter le défilement horizontal. Vous devez également définir l'origine de la transformation en haut à gauche pour conserver le coin supérieur gauche du document en haut à gauche de la fenêtre.

        var zoom = 1;
        var width = 100;

        function bigger() {
            zoom = zoom + 0.1;
            width = 100 / zoom;
            document.body.style.transformOrigin = "left top";
            document.body.style.transform = "scale(" + zoom + ")";
            document.body.style.width = width + "%";
        }
        function smaller() {
            zoom = zoom - 0.1;
            width = 100 / zoom;
            document.body.style.transformOrigin = "left top";
            document.body.style.transform = "scale(" + zoom + ")";
            document.body.style.width = width + "%";
        }
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.