transform; scale

[Michael]

Hallo und guten Tag,

sorry, aber ich komme nicht weiter und finde auch nichts passendes mit den Suchoptionen und bei Google. Nun hoffe ich, das ihr mir helfen könnt. Über Vieport oder auch über die CSS Media-Funktion, - gibt es da eine Möglichkeit, eine html-Seite komplett mit dem "Browser-Zoom" meinetwegen auf 200% zu skalieren? Z.B. bei Auflösungsbreite 1500 zoome diese Seite auf 150% ? Oder wenn du drucken willst, zoome auf 40% ?

Ja, ich weiß es ist nicht mehr üblich, da man es heutzutage alles flexibel macht usw., aber ich habe da eine Seite, da würde ich gerne automatisch zoomen. Kennt jemand ein Codebeispiel, welches ich einbinden kann.

Vielen Dank für die Mühe. Michael

[Gunnar Bittersmann]

@@Michael

Über Vieport oder auch über die CSS Media-Funktion, - gibt es da eine Möglichkeit, eine html-Seite komplett mit dem "Browser-Zoom" meinetwegen auf 200% zu skalieren? Z.B. bei Auflösungsbreite 1500 zoome diese Seite auf 150% ? Oder wenn du drucken willst, zoome auf 40% ?

Du kannst für verschiediene media queries unterschiedliche Schriftgrößen fürs html-Element angeben. Alles, was sich darauf bezieht (d.h. in em oder rem angegeben ist) skaliert dann entsprechend mit.

Wenn irgendwas nicht mitskaliert (weil bspw. in px angegeben), dann hast du was falsch gemacht.

LLAP 🖖

[MrMurphy1]

Hallo

Ohne konkretes Beispiel sind solche Fragen meist nur unzureichend für den Fragesteller zu beantworten.

Mit "transform scale" werden einzelne Elemente einer Seite gestaltet.

Die ganze Seite wird über Media Queries angepasst, auch ein Zoom-Faktor.

Wobei dabei unterschieden werden sollte, welche Teile der Seite gezoomt werden sollen. Bilder sollten dabei zum Beispiel nicht zu pixelig werden.

Gruss

MrMurphy

[Michael]

Ach, okay, danke. Nur einzelne Elemente…, das kenne ich, okay. Hmm, ich dachte es gibt nen zweizeiler, der automatisch die ganze Seite zoomen lässt, so wie STRG+Mausrad.

Danke schön

[MrMurphy1]

Hallo

Das kommt darauf an ob das HTML und CSS den aktuellen Regeln entsprechen. Dann läßt sich so ein Verhalten wie von dir gewünscht relativ einfach einfügen.

Gruss

MrMurphy

[marctrix]

Hej MrMurphy1,

Das kommt darauf an ob das HTML und CSS den aktuellen Regeln entsprechen. Dann läßt sich so ein Verhalten wie von dir gewünscht relativ einfach einfügen.

Jetzt freut sich Michael sicher, dass das leicht umzusetzen ist, fragt sich aber vermutlich gleichzeitig: wie denn? 😀

Marc

[MrMurphy1]

Hallo

wie denn?

Die Hürde habe ich doch bereits in meinem ersten Beitrag beschrieben:

Ohne konkretes Beispiel sind solche Fragen meist nur unzureichend für den Fragesteller zu beantworten.

Gruss

MrMurphy

[marctrix]

Hej MrMurphy1,

Ohne konkretes Beispiel sind solche Fragen meist nur unzureichend für den Fragesteller zu beantworten.

Yo, dat schtimmt! - Ich dachte du hast da irgendwas auf Lager, was ich nicht kenne. Unter welchen Umständen sollte das denn gehen?

Ich wüsste noch nicht so recht, wie es gehen soll - außer alle Dimensionen sind tatsächlich in em angegeben. was allerdings zu vielen Problemen führen wird. Denn in der Regel will man ja, dass eine Darstellung sich an den Viewport anpasst. Das wäre dann ausgeschlossen.

Oder ist das bei diesem speziellen Projekt nicht gewünscht?

Übrigens kann man für den Druck auch auf inch, cm, pica oder Punkte zurückgreifen, um für ein Blatt Papier zu optimieren.

Funktioniert dann aber nur auf der Größe, für die man optimiert hat (z.B. DIN A4, Letter würde dann schon nicht mehr gehen, von anderen Formaten ganz zu schweigen).

Da fehlen echt noch Infos zu dem Problem - vor allem, warum die automatische Zoom-Möglichkeit des Druckertreibers nicht genutzt werden soll - hat doch sicher inzwischen jeder?!?

Marc

[Gunnar Bittersmann]

@@marctrix

Ich wüsste noch nicht so recht, wie es gehen soll - außer alle Dimensionen sind tatsächlich in em angegeben. was allerdings zu vielen Problemen führen wird.

Deshalb gibt man ja mache Längen nicht in em oder rem an, sondern in %. Oder vw, vh, …

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Ich wüsste noch nicht so recht, wie es gehen soll - außer alle Dimensionen sind tatsächlich in em angegeben. was allerdings zu vielen Problemen führen wird.

Deshalb gibt man ja mache Längen nicht in em oder rem an, sondern in %. Oder vw, vh, …

Und wie soll das dann 1:1 gezoomt werden? - Das ist ja hier gefragt. - Oder habe ich die Frage falsch verstanden?

Marc

[JürgenB]

Hallo,

Und wie soll das dann 1:1 gezoomt werden? - Das ist ja hier gefragt. - Oder habe ich die Frage falsch verstanden?

sollte das nicht mit einem

body { transform:scale(1.5); transform-origin:left top;}

gehen?

Gruß
Jürgen

[Michael]

Hallo,

das mit dem body-transform-scale hört sich doch gut an. Wie bekomme ich das abhängig von der Bildschirmauflösung eingestellt? Mit diesen Media-Geschichten, bei denen ich versucht habe mich einzulesen, habe ich leider keine Erfahrung.

Dann wird die eine html-file ab einer Bildschirmbreit ab ca. 1500 auf 1.5 scaliert. Die wenn/dann-Verbindung zum transform-scale fehlt mir halt.

Danke und mfg Michael

[JürgenB]

Hallo,

das könnte z.B. so aussehen:

body { transform: scale(0.8); transform-origin: left top }
@media screen and (min-width:40em) { body { transform: scale(1.0) } }
@media screen and (min-width:50em) { body { transform: scale(1.2) } }

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

das könnte z.B. so aussehen:

body { transform: scale(0.8); transform-origin: left top }
@media screen and (min-width:40em) { body { transform: scale(1.0) } }
@media screen and (min-width:50em) { body { transform: scale(1.2) } }

Nein. Letzteres führt dazu, dass der body in der Breite nicht mehr vollständig m Viewport zu sehen ist.

LLAP 🖖

[JürgenB]

Hallo Gunnar,

Nein. Letzteres führt dazu, dass der body in der Breite nicht mehr vollständig m Viewport zu sehen ist.

ob das ein Problem ist, hängt aber von der Breite des Inhalts ab.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

Nein. Letzteres führt dazu, dass der body in der Breite nicht mehr vollständig m Viewport zu sehen ist.

ob das ein Problem ist, hängt aber von der Breite des Inhalts ab.

Das ist auch dann ein Problem, wenn du Breite des Inhalts und Skalierung als zwei Werte im Stylesheet stehen hast, die voneinander abhängen (bspw. 80% und 1.25).

Es sei denn, du verwendest eine custom property (CSS-Variable) und calc() oder einen CSS-Präprozessor, um den einen Wert aus dem anderen zu berechnen.

LLAP 🖖

[JürgenB]

Hallo Gunnar,

Michael wollte wissen, wie man in Abhängigkeit der Viewportbreite die Seite umskalieren kann. Ob das im allgemeinen und meine Lösungsidee im Speziellen sinnvoll ist, hängt letztendlich von Michaels Seite ab.

Gruß
Jürgen

[Michael]

Hallo,

ja danke. das ist super. So etwas habe ich gesucht. Da werde ich mal mit rumprobieren. Sieht aber schon sehr gut aus.

Vielen Dank an alle, für die vielen Anregungen.

mfg Michael

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Nochmal ausführlicher:

Das ist auch dann ein Problem, wenn du Breite des Inhalts und Skalierung als zwei Werte im Stylesheet stehen hast, die voneinander abhängen (bspw. 80% und 1.25).

body
{
  width: 80%;
  transform: scale(1.25);
}

Wenn man die Skalierung ändern will, muss man beide Werte anfassen – schlecht wartbar, fehleranfällig. Sowas sollte man tunlichst vermeiden.

Es sei denn, du verwendest eine custom property (CSS-Variable) und calc() oder einen CSS-Präprozessor, um den einen Wert aus dem anderen zu berechnen.

:root
{
  --scale-factor: 1.25;
}

body
{
  width: calc(100% / var(--scale-factor));
  transform: scale(var(--scale-factor));
}

Das sollte in allen aktuellen Browsern funktionieren; nicht aber in alten IEs. CSS-Postprozessor drüberlaufen lassen …

oder CSS-Präprozessor verwenden:

$scale-factor: 1.25;

body
{
  width: 100% / $scale-factor;
  transform: scale($scale-factor);
}

Und was hat dieser Syntaxhighlighter jetzt schon wieder zu meckern?

---

Ich würde hier aber die Finger von scale() lassen und wie marctrix sagte einfach nur die Basischriftgröße ändern.

LLAP 🖖

[marctrix]

Hej JürgenB,

body { transform: scale(0.8); transform-origin: left top }
@media screen and (min-width:40em) { body { transform: scale(1.0) } }
@media screen and (min-width:50em) { body { transform: scale(1.2) } }

Zusätzlich zu dem Kommentar von @Gunnar Bittersmann: so kommt es zu Sprüngen beim ändern der viewport-Größe. Ich denke es ist etwas komplizierter.

Das Layout sollte auf em/rem basieren, dann kann man die Schriftgröße im Root-Element auf so etwas wie calc(1em + .5vw) setzen. Wenn alle breiten in em angegeben werden, skaliert nun das gesamte Layout mit.

Der Sinn erschließt sich mir jedoch nicht so ganz. Besser wäre den Platz mit geschicktem Einsatz von Grid und/oder flexbox zu nutzen, um die Breite des Bildschirms auszunutzen. Schriften vergrößern können wohl alle, die darauf angewiesen sind…

Marc

[JürgenB]

Hallo Marc,

ich denke, die Sprünge sind kein Problem, da kaum ein Besucher die Fensterbreite langsam verändert. Sonst stimme ich dir zu.

Gruß
Jürgen

[marctrix]

Nachtrag zu viewport-Einheiten: Fun with Viewport Units

[Linuchs]

Moin,

Oder wenn du drucken willst, zoome auf 40% ?

Ich mache sowas, aber unabhängig vom Viewport.

Es sind ganze Lieder-Textbücher, die ich in A4, A5 und A6 drucken kann. Das Papier ist immer A4. Klar, dass die zu druckende Reihenfolge der Seiten vom Format abhängt, also habe ich für jedes der drei Formate und für jedes Liederbuch ein HTML, die einzelnen Lieder werden als iframe eingebunden.

Bei A6 ist die Hälfte der Seiten sogar auf den Kopf zu stellen, weil sie sich baim Falten "umdrehen".

Die einzelnen Lieder sind einmalige HTML-Seiten. Sie können in verschiedene Liederbücher eingebunden werden. Sie haben den Eintrag <link rel=stylesheet href='css/basis.css'>

Bevor ich A5 drucke, kopiere ich die basis_A5.css auf basis.css

Linuchs