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

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%?)

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;
} 

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.

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.

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.

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

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

 * {
transform: scale(1.1, 1.1)
}

cela transformera chaque élément de la page

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.

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.)

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 + "%";
        }