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

vous pourriez être en mesure d'utiliser le CSS zoom propriété-prise en charge dans IE 5.5+, Opera, et Safari 4, et Chrome

puis-je utiliser: CSS Zoom

Firefox est le seul navigateur majeur qui ne supporte pas Zoom ( bugzilla item ici ) mais vous pouvez utiliser la propriété "proprietary" -moz-transform dans Firefox 3.5 .

donc vous pouvez 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 style zoom soit là, Firefox ne le supporte toujours pas tristement.

aussi, c'est légèrement différent de votre zoom. Le css transform fonctionne comme un zoom image, donc il agrandira votre page mais ne provoquera pas de reflets, etc.

modifier mis à jour la transformation origine.

si votre CSS est construit entièrement autour des unités ex ou em , alors cela pourrait être possible et faisable. Vous avez juste besoin de déclarer font-size: 150% dans votre style pour body ou html . Cela devrait amener toutes les autres longueurs à se dimensionner proportionnellement. Vous ne pouvez pas dimensionner les images de cette façon, cependant, à moins qu'ils obtiennent un style aussi.

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

comme dit Johannes -- pas assez de rép 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. C'est-à-dire tout ce que vous avez utilisé comme unités %, em ou ex". Bien que je pense que le % est basé sur le contenu de l'élément, pas la taille de police.

et vous n'utiliseriez pas normalement 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 sera équivalent à 10px. Pour autant que je sache cela fonctionne à travers tous les navigateurs principaux.

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

faire body{font-size: 125%}; et tout - y compris les images - sera double taille d'origine.

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

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

Jon Tan l'a fait avec son site - http://jontangerine.com / Tout y compris les images a été déclaré dans ems. Tout. C'est la façon dont l'effet escompté est atteint. Le zoom du texte et le zoom de l'écran donnent presque le même résultat.

CSS ne sera pas en mesure de zoomer sur demande, mais si vous couplez CSS avec JS, vous pouvez changer certaines valeurs pour faire paraître une page plus grande. Cependant, comme il a été dit, cette fonctionnalité est la norme de nos jours dans les navigateurs modernes: pas besoin de la reproduire. En fait, le répliquer ralentira votre site Web (plus de choses à charger, plus de JS ou CSS à analyser ou exécuter et appliquer, etc.)

je pense qu'il est impossible de le faire purement avec CSS - vous pouvez avoir besoin de vous salir les mains avec Javascript pour s'assurer que le travail est fait correctement.