Wie kann ich eine ganze Webseite mit CSS skalieren?

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

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

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.

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.

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.

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

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

 * {
transform: scale(1.1, 1.1)
}

Dadurch wird jedes Element auf der Seite transformiert

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.

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

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