Comment puis-je l'échelle de l'ensemble d'une page web avec les CSS?

Utilisez Firefox, vous pouvez agrandir une page web entière en appuyant simplement sur CTRL +. Ce que ce n'est agrandir proportionnellement à la totalité de la page web (polices, images, etc).

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

Est là quelque chose comme page-size: 150% (ce qui permettrait d'augmenter l'ensemble de la page de parties de x%?)

Le zoom de la page fonctionnalité de Firefox s'affiche dans chaque navigateur moderne de la réplication, il semble plutôt inutile.
Je suis d'accord avec David. Il est inutile de reproduire ce depuis que les navigateurs de nos jours, cette fonctionnalité est intégrée....
ce serait en fait une incroyable fonctionnalité utile pour les appareils mobiles. Beaucoup de téléphones sont maintenant en augmentant leur PPI sans accueillir la différence (en dehors de l'iPhone4, bien sûr).
Ses pas le reproduire. Il pourrait être utile à quelque chose comme une page/élément aperçu dans un intégré à div.
Le concepteur de la page doit être en mesure de définir un zoom par défaut pour les pages de son site. J'ai une page qui était grande quand je l'ai fait, mais petit maintenant, en raison de la haute résolution affiche: lonniebest.com/CardTrick au Lieu de refaire la page, je voudrais faire un zoom par défaut.
Pas un correctif complet, mais l'utilisation de l'em est comme unité de mesure. Les choses commencent à l'échelle, par rapport à leur parent (changement de la taille et de tout coule à travers). Pour des résultats plus intéressants... utilisation de la cm comme unité de mesure bien que les appareils mobiles semblent réduire la taille de moitié.

InformationsquelleAutor | 2009-07-20

170

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

Puis-je utiliser: css Zoom

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

De sorte que vous pouvez utiliser:
```
div.zoomed { 
    zoom: 3; 
    -moz-transform: scale(3); 
    -moz-transform-origin: 0 0;
} 
```
- Le propriétaire zoom propriété est prise en charge uniquement par IE. reference.sitepoint.com/css/zoom#compatibilitysection
- David, cette référence est très en dehors de la date - regarder le les versions de navigateur, il énumère. CSS Zoom est pris en charge dans tous les principaux navigateurs actuels à l'exception de Firefox. Et il n'est plus propriétaire que tout de le-moz - CSS extensions.
- Remarque: je pense que les autres solutions qui ont été proposées - comme em et % sur la base de l'échelle sont plus "pure", mais ne sont pas nécessairement pratique sur la plupart des mises en page web, sauf si vous avez construit de cette façon à partir de zéro.
- J'ai testé Opera 10b2 et il ne semble pas à la soutenir. Firefox nightly se comporte bizarrement (zoom fragment disparaît). IE5/6 sont buggés. Fonctionne très bien dans WebKit seulement.
- Je ne peux pas argumenter avec ça approfondie de la suite de tests, @porneL. Vous avez testé les deux versions obsolètes de l'IE, de ne pas mentionner ce qui Firefox, vous testé... je l'ai testé dans tous les navigateurs actuels. Essayez-la.
- Cela n'a pas fonctionné pour moi dans Opera 10.10, a travaillé dans les versions actuelles de l'autre quatre principaux navigateurs. J'ai utilisé body { zoom: 0.6667; -moz-transform: scale(0.6667); }
- merci jon, super infos! dans firefox -moz-transform échelle est en effet efficace, mais en fonction de votre utilisation, vous pouvez avoir besoin de corriger la position de l'élément à l'aide de -moz-transform-origin (cfr. developer.mozilla.org/En/CSS/-moz-transform-origin)
- Ne fonctionne pas sous Opera (v11.51 sur Windows; v11.50 sur Linux), mais "fonctionne" avec tout ce que j'ai essayé - IE8 vis jusqu'centre aligné bloc. Firefox est plutôt glitch, ajoute parfois des frontières et de ne pas centrer correctement (également nécessaires -moz-transform-origin: center top; pour arrêter la page est centrée verticalement).
- Hmmm, ça ressemble à transform:scale est pris en charge par tous les moteurs de navigateur maintenant (il y a -webkit- -moz- -o- et -ms- préfixes). En supposant que ceux qui fonctionnent réellement (semble de test rapide), alors la seule raison d'utiliser zoom est pour IE8 et ci-dessous?
- stackoverflow.com/a/3131624/373345 a travailler réponse
- J'aime bien cette solution, mais j'ai remarqué que l'utilisation de ce mess avec jqplot du surligneur et des possibilités de zoom. Est-il une solution qui coordonne bien avec ces fonctions?
- Méfiez-vous, à l'aide de l'échelle transforme peut causer des problèmes avec js/à base de pixelbased interaction types comme déplaçable et de l'ordre. Je suis en train de travailler sur un problème similaire et ont jusqu'à maintenant remarqué que certains de ceux qui sont toujours très bien fonctionner lors de l'utilisation d'em unités, mais pas avec l'ampleur des transformations.
- Cette travaillé en chrome pour moi
InformationsquelleAutor Jon Galloway
60

C'est plutôt une réponse tardive, mais vous pouvez utiliser
```
body {
   transform: scale(1.1);
   transform-origin: 0 0;
   //add prefixed versions too.
}
```
zoom sur la page de 110%.
Bien que la zoom style est là, Firefox n'est toujours pas en charge il tristement.

Aussi, ce qui est légèrement différent de votre zoom. Le css transform fonctionne comme un zoom sur les images, donc il va agrandir votre page, mais pas à cause de redistribution, etc.

Modifier mis à jour le transformer origine.
- Merci pour cela, mais vous avez besoin de quelques points-virgules entre les déclarations. Aussi, lorsque j'ai essayé ce que la page décalé à gauche, passé de la marge de gauche, de sorte que la partie gauche de la page n'était plus visible. En ajoutant les divers correspondant "...transform-origin: 0 0" déclarations d'une correction.
- oui, je l'ai mentionné que le contenu est coupé avec transform. Merci pour le commentaire.
- Je suis d'accord avec @Dave Burton: à l'aide de transform-origin: 0 0; fait ce que je veux. Par exemple, pour un zoom de la page à 150%: transform: scale(1.5); transform-origin: 0 0;. Je crois que @kumar_harsh s 'sinon bonne réponse devrait être corrigé.
- vous utilisez cette méthode, il va toujours de l'écrêtage. N'importe qui point vous utilisez pour transform-origin. Ce que j'ai écrit est un exemple de ce que la valeur à utiliser. Vous êtes bien-sûr libre d'utiliser transform-origin: 0 0 si cela convient à votre cas d'utilisation (ou si vous n'avez pas de soins pour ce qu'il y a dans le coin inférieur droit)
- Ce n'est pas pour tout de mes navigateurs
- pouvez-vous partager un extrait de code pour montrer le comportement? Je suis sûr qu'il ya une autre raison pour cela.
- Du bon travail, mais il ajoute une barre de défilement horizontale. comment faire pour éviter cela?
- ajouter un overflow:hidden de la propriété du corps.
InformationsquelleAutor kumar_harsh
17

Si votre CSS est entièrement construite autour de ex ou em unités, alors ce pourrait être possible et réalisable. Vous auriez juste besoin de déclarer font-size: 150% dans votre style de body ou html. Cela devrait entraîner toutes les autres longueurs à l'échelle proportionnellement. Vous ne pouvez pas l'échelle des images de cette façon, bien que, à moins qu'ils obtiennent un style trop.

Mais c'est un très gros si sur la plupart des sites, de toute façon.
- Qui ne ferait que changer la taille de mes polices de caractères. CTRL+ a également la proposition élargit fixe les largeurs, hauteurs et tailles d'image ainsi.
- Je sais, mais c'est aussi proche que vous pouvez obtenir avec pur CSS. Aussi, non seulement vos polices changent tout, mais où les dimensions sont spécifiées sous la forme d'un multiple de la taille de la police. Sens, tout d'où vous %, em ou ex unités.
- Ce n'est pas correct. J'ai testé la solution que j'ai énumérés ci-dessous (zoom + -moz-transform properties), et il fonctionne sur FF3.5, IE6+, Safari et Opera. Il met à l'échelle les images ainsi que les textes. Vous pouvez mettre à l'échelle les pages en CSS.
InformationsquelleAutor Joey
5

Que Johannes dit-ce pas assez de rep à commenter directement sur sa réponse -- en effet, vous pouvez le faire tant que tous les éléments' "dimensions sont spécifiées comme un multiple de la taille de la police. Sens, tout d'où vous %, em ou ex unités". Bien que je pense que les % sont fondées sur l'élément contenant, pas de taille de police.

Et vous ne serait pas l'habitude d'utiliser ces unités relatives pour les images, étant donné qu'elles sont composées de pixels, mais il y a un truc qui rend ce beaucoup plus pratique.

Si vous définissez body{font-size: 62.5%}; puis cadratin (1 em sera l'équivalent de 10px. Pour autant que je sais que cela fonctionne dans tous les principaux navigateurs.

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

Faire body{font-size: 125%}; et de tout - y compris les images - wil être le double de la taille originale.
- Je ne comprends pas, si je dis body{font-size: 62.5%; font-size: 125%} - comment définir cadratin (1 em pour être 10px. Pourrait le navigateur tout simplement ignorer la première police-taille de la déclaration et puis il suffit de faire de 125% = 10px?
- Ne serait pas* le navigateur tout simplement....
- Je pense que vous avez mal compris. vous ne voudriez pas faire les deux en même temps. 62.5 x2 = 125... pour montrer comment vous pouvez mettre à l'échelle les choses par l'ajustement de la valeur.
- Yep. J'aurais dit", alors si vous utilisez Javascript pour la body {font-size: 125%} tous les éléments de la page qui double de taille.
InformationsquelleAutor e100
3

Avec ce code cadratin (1 em ou 100% sera égale à 1% de la hauteur du corps
```
document.body.style.fontSize = ((window.innerHeight/100)*6.25)+"%"
```
InformationsquelleAutor Cedric Austen-Brown
1

Jon Tan a fait avec son site - http://jontangerine.com/
Tout, y compris des images a été déclarée en ems. Tout. C'est la façon dont l'effet escompté est atteint. Texte de zoom et zoom d'écran des rendements presque exactement le même résultat.

InformationsquelleAutor Andy Ford
1

CSS ne sera pas en mesure de zoom sur la demande, mais si vous avez quelques CSS avec JS, vous pouvez modifier certaines valeurs pour faire une page de paraître plus gros.
Cependant, comme il a été dit, cette fonction est la norme de nos jours dans les navigateurs modernes: pas besoin de le reproduire. Comme une question de fait, de la réplication, il va ralentir votre site web (plus de choses à charger, plus JS ou CSS pour analyser ou d'exécuter et d'appliquer, etc.)

InformationsquelleAutor T0xicCode
0
```
 * {
transform: scale(1.1, 1.1)
}
```
cela va transformer chaque élément sur la page

InformationsquelleAutor Rushabh Sooni
-3

Je pense que c'est impossible de le faire uniquement avec des feuilles de style CSS, vous pouvez avoir besoin de vous d'obtenir votre main sale avec Javascript afin de s'assurer que le travail est fait correctement.
- Je pense que cela est vrai, si vous voulez que votre affichage de l'échelle de regarder la même qu'elle soit visionnée sur un iPhone ou 10000x10000 stade d'affichage
- Oui, nous pourrions utiliser javascript pour définir les styles CSS que l'échelle de l'ensemble de la page ou des polices adaptées à la taille de la fenêtre d'affichage / d'.
InformationsquelleAutor Amir

Vous devez vous connecter pour publier un commentaire.