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

Question

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

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

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

Answer 1

Vous pouvez peut-être utiliser la propriété CSS Zoom - supportée par IE 5.5+, Opera, Safari 4 et Chrome (vérifié, veuillez vérifier avant de voter).

Firefox est le seul grand navigateur qui ne prend pas en charge Zoom ( bugzilla item ici ) mais vous pourriez utiliser le propriété "propriétaire" -moz-transform dans Firefox 3.5 .

Donc vous pourriez utiliser :

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

Answer 2

Il s'agit d'une réponse tardive, mais vous pouvez utiliser les éléments suivants

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

pour agrandir la page de 110 %. Bien que le zoom est là, mais Firefox ne le prend malheureusement pas encore en charge.

De plus, c'est légèrement différent de votre zoom. Le site css transform fonctionne comme un zoom d'image, ce qui permet d'agrandir votre page sans provoquer de reflux, etc.

Answer 3

Si votre CSS est entièrement construit autour ex o em alors cela pourrait être possible et réalisable. Il suffirait de déclarer font-size: 150% dans votre style pour body o html . Ainsi, toutes les autres longueurs devraient être mises à l'échelle proportionnellement. Vous ne pouvez pas mettre à l'échelle les images de cette façon, à moins qu'elles n'aient aussi un style.

Mais c'est une très grande si sur la plupart des sites, en tout cas.

Answer 4

Comme le dit Johannes - qui n'est pas assez représenté 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. Autrement dit, tout ce pour quoi vous avez utilisé des unités %, em ou ex". Bien que je pense que les % sont basés sur l'élément contenant, pas sur la taille de la police.

Normalement, vous n'utiliseriez pas ces unités relatives pour les images, étant donné qu'elles sont composées de pixels, mais il existe une astuce qui rend la chose beaucoup plus pratique.

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

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

Faire body{font-size: 125%}; et tout - y compris les images - sera doublé en taille originale.

Answer 5

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

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