Wie kann ich eine ganze Webseite mit CSS skalieren?

151

Mit Firefox können Sie eine ganze Webseite durch einfaches Drücken vergrößern CTRL +. Dadurch wird die gesamte Webseite (Schriftarten, Bilder usw.) proportional vergrößert.

Wie kann ich dieselbe Funktionalität einfach mit CSS replizieren?

Gibt es so etwas wie page-size: 150%(was den gesamten Seitenanteil um x% erhöhen würde?)

IJ Kennedy
quelle
7
Die Seitenzoomfunktion von Firefox wird in jedem modernen Browser angezeigt - das Replizieren erscheint ziemlich sinnlos.
Quentin
1
Ich stimme David zu. Es scheint irgendwie sinnlos, dies zu replizieren, da Browser heutzutage diese Funktion eingebaut haben ....
Benutzer
5
Dies wäre tatsächlich eine unglaublich nützliche Funktion für mobile Geräte. Viele Telefone erhöhen jetzt ihren PPI, ohne den Unterschied auszugleichen (abgesehen vom iPhone4 natürlich).
DA.
38
Es repliziert es nicht. Dies kann für eine Seiten- / Elementvorschau in einem eingebetteten Div hilfreich sein.
RichieHH
3
Der Seitendesigner sollte in der Lage sein, einen Standardzoom für seine Seite festzulegen. Ich habe eine Seite, die groß war, als ich sie erstellt habe, aber jetzt aufgrund hochauflösender Anzeigen klein : lonniebest.com/CardTrick Anstatt die Seite neu zu erstellen, möchte ich standardmäßig gezoomt werden.
Lonnie Best

Antworten:

182

Möglicherweise können Sie die CSS- zoomEigenschaft verwenden, die in IE 5.5+, Opera, Safari 4 und Chrome unterstützt wird

Kann ich verwenden: CSS Zoom

Firefox ist der einzige große Browser, der Zoom nicht unterstützt ( Bugzilla-Element hier ), aber Sie können die "proprietäre" -moz-transform-Eigenschaft in Firefox 3.5 verwenden .

Sie könnten also verwenden:

div.zoomed { 
    zoom: 3; 
    -moz-transform: scale(3); 
    -moz-transform-origin: 0 0;
} 
Jon Galloway
quelle
1
Die proprietäre Zoom-Eigenschaft wird nur vom IE unterstützt. reference.sitepoint.com/css/zoom#compatibilitysection
Quentin
15
David, diese Referenz ist sehr veraltet - schauen Sie sich die darin aufgeführten Browserversionen an. CSS Zoom wird in allen gängigen Hauptbrowsern außer Firefox unterstützt. Und es ist nicht proprietärer als jede der -moz- CSS-Erweiterungen.
Jon Galloway
3
Hinweis: Ich denke, die anderen vorgeschlagenen Lösungen - wie em- und% -basierte Skalierung - sind "reiner", aber auf den meisten Weblayouts nicht unbedingt praktisch, es sei denn, Sie haben diese Methode von Grund auf neu erstellt.
Jon Galloway
1
Ich habe Opera 10b2 getestet und es scheint es nicht zu unterstützen. Firefox verhält sich nachts seltsam (gezoomtes Fragment verschwindet). IE5 / 6 sind fehlerhaft. Funktioniert nur in WebKit.
Kornel
2
danke jon, tolle info! In Firefox funktioniert die -moz-transform-Skala zwar, aber je nach Anwendungsfall müssen Sie möglicherweise die Position des Elements mithilfe von -moz-transform-origin korrigieren (vgl. developer.mozilla.org/En/CSS/-moz-transform) -origin )
futtta
79

Dies ist eine ziemlich späte Antwort, die Sie jedoch verwenden können

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

um die Seite um 110% zu zoomen. Obwohl der zoomStil vorhanden ist, unterstützt Firefox ihn leider immer noch nicht.

Dies unterscheidet sich auch geringfügig von Ihrem Zoom. Das css transformfunktioniert wie ein Bildzoom, vergrößert also Ihre Seite, verursacht aber keinen Reflow usw.


Bearbeiten hat den Transformationsursprung aktualisiert.

kumarharsh
quelle
1
Vielen Dank dafür, aber Sie benötigen einige Semikolons zwischen den Deklarationen. Als ich dies versuchte, verschob sich die Seite nach links, über den linken Rand hinaus, so dass der linke Teil der Seite nicht mehr sichtbar war. Durch Hinzufügen der verschiedenen entsprechenden "... transform-origin: 0 0" -Deklarationen wurde dies behoben.
Dave Burton
Ja, ich hätte erwähnen sollen, dass der Inhalt mit beschnitten ist transform. Danke für den Kommentar.
Kumarshar
1
Ich stimme @Dave Burton zu: using transform-origin: 0 0;macht was ich will. So zoomen Sie die Seite auf 150% : transform: scale(1.5); transform-origin: 0 0;. Ich glaube, dass die ansonsten gute Antwort von @kumar_harsh korrigiert werden sollte.
Kai Carver
@KaiCarver Wenn Sie diese Methode verwenden, führt dies immer zu Übersteuerungen. Egal für welchen Punkt Sie verwenden transform-origin. Was ich geschrieben habe, ist nur ein Beispiel dafür, welchen Wert ich verwenden soll. Sie können es natürlich verwenden, transform-origin: 0 0wenn es zu Ihrem Anwendungsfall passt (oder wenn Sie sich nicht darum kümmern, was sich in der unteren rechten Ecke befindet)
kumarharsh
@AngularM können Sie ein Code-Snippet freigeben, um das Verhalten zu zeigen? Ich bin sicher, es gibt noch einen anderen Grund dafür.
Kumarharsh
18

Wenn Ihr CSS vollständig um exoder emEinheiten herum aufgebaut ist, ist dies möglicherweise möglich und machbar. Sie müssten nur font-size: 150%in Ihrem Stil für bodyoder deklarieren html. Dies sollte dazu führen, dass alle anderen Längen proportional skaliert werden. Sie können Bilder jedoch nicht auf diese Weise skalieren, es sei denn, sie erhalten auch einen Stil.

Aber das ist ein sehr großes , wenn auf den meisten Websites, sowieso.

Joey
quelle
3
Das würde nur die Größe meiner Schriftarten ändern. CTRL + Proposition erweitert auch feste Breiten, Höhen und Bildgrößen.
2
Ich weiß, aber es ist so nah wie möglich mit reinem CSS. Außerdem ändern sich nicht nur Ihre Schriftarten, sondern alles, wo die Abmessungen als Vielfaches der Schriftgröße angegeben werden. Das heißt, alles, wo Sie verwendet haben %, emoder exEinheiten.
Joey
1
Das stimmt einfach nicht. Ich habe die unten aufgeführte Lösung getestet (Eigenschaften für Zoom + -Moz-Transformation) und sie funktioniert unter FF3.5, IE6 +, Safari und Opera. Es skaliert sowohl Bilder als auch Text. Sie können Seiten in CSS skalieren.
Jon Galloway
6

Wie Johannes sagt - nicht genug Wiederholungen, um seine Antwort direkt zu kommentieren - können Sie dies tatsächlich tun, solange die Abmessungen aller Elemente als Vielfaches der Schriftgröße angegeben sind. Das heißt, alles, wo Sie%, em oder ex verwendet haben Einheiten". Obwohl ich denke, dass% auf dem enthaltenen Element basieren, nicht auf der Schriftgröße.

Normalerweise würden Sie diese relativen Einheiten nicht für Bilder verwenden, da sie aus Pixeln bestehen, aber es gibt einen Trick, der dies viel praktischer macht.

Wenn Sie definieren body{font-size: 62.5%};, entspricht 1em 10px. Soweit ich weiß, funktioniert dies in allen Hauptbrowsern.

Anschließend können Sie Ihre (z. B.) 100px-Quadratbilder mit width: 10em; height: 10em;und unter der Annahme, dass die Skalierung von Firefox auf Standard eingestellt ist, angeben. Die Bilder haben ihre natürliche Größe.

Machen body{font-size: 125%}; und alles - einschließlich Bilder - haben die doppelte Originalgröße.

e100
quelle
Ich verstehe nicht, wenn ich body sage {Schriftgröße: 62,5%; Schriftgröße: 125%} - wie würde das 1em als 10px definieren? Könnte der Browser die erste Deklaration der Schriftgröße einfach ignorieren und dann einfach 125% = 10px machen?
Ich denke du hast es falsch verstanden. Sie würden nicht beide gleichzeitig tun. 62,5 x2 = 125 ... um zu zeigen, wie Sie Dinge durch Anpassen des Werts skalieren können.
Ape-inago
Ja. Ich hätte sagen sollen: "Wenn Sie dann Javascript verwenden, um den Textkörper {Schriftgröße: 125%} festzulegen, verdoppeln sich alle Seitenelemente."
e100
3

Mit diesem Code entspricht 1em oder 100% 1% der Körpergröße

document.body.style.fontSize = ((window.innerHeight/100)*6.25)+"%"
Cedric Austen-Brown
quelle
2
 * {
transform: scale(1.1, 1.1)
}

Dadurch wird jedes Element auf der Seite transformiert

Rushabh Sooni
quelle
1

Jon Tan hat dies mit seiner Website getan - http://jontangerine.com/ Alles, einschließlich Bilder, wurde in ems deklariert. Alles. So wird der gewünschte Effekt erzielt. Textzoom und Bildschirmzoom liefern fast das gleiche Ergebnis.

Andy Ford
quelle
1

CSS kann bei Bedarf nicht zoomen. Wenn Sie jedoch CSS mit JS koppeln, können Sie einige Werte ändern, um eine Seite größer erscheinen zu lassen. Wie bereits erwähnt, ist diese Funktion heutzutage in modernen Browsern Standard: Sie muss nicht repliziert werden. Tatsächlich verlangsamt das Replizieren Ihre Website (mehr Dinge zum Laden, mehr JS oder CSS zum Parsen oder Ausführen und Anwenden usw.)

T0xicCode
quelle
Es ist eine Standardbrowserfunktion, aber wenn Sie die Funktion direkt zur Website hinzufügen, müssen Sie sich nicht auf (1) das Fachwissen des Benutzers mit dem Browser seiner Wahl und (2)
browserspezifische
1

Ich habe den folgenden Code, der die gesamte Seite über CSS-Eigenschaften skaliert. Wichtig ist, dass Sie body.style.width auf die Umkehrung des Zooms setzen, um horizontales Scrollen zu vermeiden. Sie müssen auch den Transformationsursprung auf oben links setzen, damit oben links im Dokument oben links im Fenster bleibt.

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