HTML-Befehl um Seite standardmäßig mit Zoomfaktor 90% anzeigen

[qyubert]

Hallo zusammen,

ich habe eine Seite eingerichtet, bei der die Buttons schön aussehen, wenn der Browser-Zoom zwischen 90% und 1005 liegt. Siehe Screenshot:

Aber wenn ich die Seite auf Zoomfaktor 80% reduziere (<90%) ist das Ergebnis, dass die Buttons nicht mehr auf einer Linie sind (sich sozusagen überlappen) bzw. untereinander angeordnet sind. Siehe Screenshot:

Daher würde ich gerne den Zoomfaktor für diese Seite standardmäßig auf 90% einstellen. Könnt Ihr mir sagen, wie das geht? Gibt es dafür einen bestimmten Befehl?

Vielen Dank für Eure freundliche Unterstützung.

Schöne Grüße qyubert

[Rolf B]

Hallo qyubert,

gibt es einen Link auf deine Seite? Dann kann dir vielleicht jemand dabei helfen, das Haus gerade zu richten statt Efeu vor die Fassade zu pflanzen.

Einen bestimmten Zoom vorzugeben KANN nicht die Lösung sein (abgesehen davon, dass ich erst recherchieren müsste um eine Idee zu finden, wie es gehen könnte).

Wenn du den Link nennst, schreibe bitte auch dazu, ob du bestimmte Alt-Browser unterstützen musst (konkret: Internet Explorer vor Version 11).

Rolf

[qyubert]

Hallo Rolf B, guten morgen zusammen

einen link gibt es leider nicht, da es sich um eine Unternehemens-Intranetseite handelt. Neben dem dass ich den nicht veröffentlichen darf, würde man von außen gar nicht draufkommen.

Gibt es vielleicht eine andere Möglichkiet, wie ich vermeiden kann, dass die Blöcke sich beim verkleinern untereinander anordnen? ☹

Noch eine kurze Frage: ich hatte im ursprünglichen html-Quelltext einen kurzen Befehl drin, der dafür sorgte, dass die Buttons über die Seite auf einer Linie gleich verteilt sind, also von links nach rechts über die ganze Seite (analog in Word als Blocksatz). Momentan ist es so, dass die Buttons nicht bis ganz rechts der Seite gehen, sondern die rechte Seite leer ist, und die Buttons von links bis etwas mehr als die Mitte der Seite reichen.

Vielen Dank für weitere Hilfen!

Schöne Grüße qyubert

[MrMurphy1]

Hallo

Ab einer bestimmten Breite bleibt den Buttons gar nichts anderes übrig als untereinander zu rutschen, wenn nicht seitwärts gescrollt werden soll. Das seitliche Scrollen sollte aber nach Möglichkeit vermieden werden.

Die Probleme entstehen durch dein unsinniges HTML und CSS, welches du uns aber vorenthältst, so dass wir dir nicht konkret helfen können. Eine Anweisung um das zu beheben gibt es nicht.

Da die meisten Besucher die Vorgaben der Browser bereits als zu klein empfinden sollten Webseiten niemals kleiner skaliert werden, eher größer. Schon gar nicht sollte den Besuchern die Möglichkeit genommen werden einen ihnen genehmen Zoom-Faktor selbst einzustellen.

Ich habe mal eine besucherfreundliche Beispielseite nach deinen uns bekannten Vorgaben erstellt. Du kannst ja mal schauen ob die deinen Vorstellungen nahekommt:

Beispielseite

Gruss

MrMurphy

[TS]

Hello Mr. Murphy,

tolles Beispiel. Sollte mMn ins Wiki unter Tutorials oder Praxistipps!

Eines würde mich persönlich noch stören:
Die Hysterese zwischen der Darstellung untereinander/nebeneinander fehlt oder ist zu klein. Das könnte zur Unbedienbarkeit führen. Kann man die vergrößern?

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@TS

tolles Beispiel.

Naja.

Eines würde mich persönlich noch stören:
Die Hysterese zwischen der Darstellung untereinander/nebeneinander fehlt oder ist zu klein.

Hä‽‽ Du meinst die Umschaltung von untereinander auf nebeneinander sollte an einem anderen Breakpoint erfolgen als die Umschaltung von nebeneinander auf untereinander?

Das könnte zur Unbedienbarkeit führen.

Inwiefern? Dass ein Nutzer seine Browserfenstergröße verändert und dabei um den Breakpoint herumzittert, ist kein ernstzunehmender use case.

LLAP 🖖

[TS]

Hello,

Hä‽‽ Du meinst die Umschaltung von untereinander auf nebeneinander sollte an einem anderen Breakpoint erfolgen als die Umschaltung von nebeneinander auf untereinander?

Das könnte zur Unbedienbarkeit führen.

Inwiefern? Dass ein Nutzer seine Browserfenstergröße verändert und dabei um den Breakpoint herumzittert, ist kein ernstzunehmender use case.

Aber nicht undenkbar!
Dass bei der Challenger eine Kachel abfällt, oder ein Blitz einschlägt oder was sonst die Explosionsursache war, war auch nicht vorgesehen.

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@TS

… ist kein ernstzunehmender use case.

Aber nicht undenkbar!

Das ist wohl eher ein Fall von Hysterie als ein Fall für Hysterese.

LLAP 🖖

[TS]

Hello,

Das gebe ich jetzt mal zurück:
Das ist eher ein Fall von Vorhersehbarkeit, dass ein Breakpoint genau die Triggerschwelle trifft. Die Wahrscheinlichkeit kann ich nicht ausrechnen, aber sie dürfte je nach Verbreitung entsprechender Devices zwischen 1:100 und 1:1000 liegen.

Das ist nach den Regeln für Barrierefreiheit aber nicht mehr duldbar. Barrierefreiheit macht sich ja nicht nur an körperlichen Gebrechen fest, sondern heute eher noch häufiger an den Unzulänglichkeiten der "Krücken", die wir verwenden.

Liebe Grüße
Tom S.

[JürgenB]

Hallo,

die Frage ist nicht, ob man die Schwelle trifft, sondern ob man auf der Schwelle die Größe des Browserfensters hin und her ändert.

Das Problem, das du vermeiden willst, hat man, wenn man mehrere Mediaqueries hat, die teilweise auf größer und teilweise auf größer-gleich testen.

Gruß
Jürgen

[TS]

Hello,

was eine Triggerschwelle ist, ist Dir aber schon klar?
Und was dann Hysterese (und ggf. auch Remanenz) damit zu tun haben können, ist Dir auch klar?

Und wenn Du nun auch noch teilweise parallel wirksame Triggerschwellen mit "größer" und "größer, gleich" ins Spiel bringst, dannn habe wir ja schon fast Heisenberg...

So ungefähr wird es schon passen ;-)

Liebe Grüße
Tom S.

[JürgenB]

Hallo,

was eine Triggerschwelle ist, ist Dir aber schon klar?
Und was dann Hysterese (und ggf. auch Remanenz) damit zu tun haben können, ist Dir auch klar?

natürlich. Daher bin auch der Meinung „hier überflüssig“.

Gruß
Jürgen

[TS]

Hello,

dann darf ich jetzt auch der Meinung sein: "eine dämliche Antwort".

Wenn man etwas Vorhersehbares Ereignis im Vorfeld behandeln kann, dann sollte man es doch tun und es nicht darauf ankommen lassen, was dann eventuell passiert!

Frei nach den Kölnern: "Et hätt noch immer jot jejange"

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@TS

dann darf ich jetzt auch der Meinung sein: "eine dämliche Antwort".

Darfst du. Das hift dir aber nicht weiter. Es ist die beste Antwort, die du kriegen konntest.

Wenn man etwas Vorhersehbares Ereignis im Vorfeld behandeln kann, dann sollte man es doch tun und es nicht darauf ankommen lassen, was dann eventuell passiert!

Der so ziemlich einzige, der seinen Broserfensterrand anfasst und hin- und herzieht, ist der Webentwickler. Bei einem wirklichen Nutzer passiert das Ereignis, das du hier vorhersiehst, nicht.

LLAP 🖖

[TS]

Hello,

Wenn man etwas Vorhersehbares Ereignis im Vorfeld behandeln kann, dann sollte man es doch tun und es nicht darauf ankommen lassen, was dann eventuell passiert!

Der so ziemlich einzige, der seinen Broserfensterrand anfasst und hin- und herzieht, ist der Webentwickler. Bei einem wirklichen Nutzer passiert das Ereignis, das du hier vorhersiehst, nicht.

Bist Du sicher, dass ich Dich da in fünf Jahren noch zitieren darf?

[...]

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@TS

Bist Du sicher, dass ich Dich da in fünf Jahren noch zitieren darf?

https://forum.selfhtml.org/cites/2221

LLAP 🖖

[JürgenB]

Hallo Tom,

ich glaube jetzt wirklich, du hast den Sinn einer Hysterese bei einem Comparator nicht verstanden.

Wenn sich der Ausgang bei Änderung des Eingangs ändert, ist das OK, oft so gewollt und selten ein Problem.

Wenn sich der Ausgang bei „festem“ Eingang ändert, z.B. wegen Rauschen, ist das (oft) ein Problem und hier ist es angeraten, dem Comparator eine Hysterese zu spendieren. Gleiches, wenn auf Änderungern untehalb einer Schwelle nicht reagiert werden soll.

Die Pixelgröße des Viewports war bei mir noch nie Fluktuationen unterzogen.

Aber wenn du meinst, Mediaqueries benötigen eine Hysterese, dann zeig mal deine Lösung.

Gruß
Jürgen

Edit
Ups, an der falschen Stelle geantwortet. Jetzt habe ich mir selbst widersprochen 😀

Die Antwort sollte hier hin.

[JürgenB]

Hallo,

Aber nicht undenkbar!
Dass bei der Challenger eine Kachel abfällt, oder ein Blitz einschlägt oder was sonst die Explosionsursache war, war auch nicht vorgesehen.

wobei ich aber das Problem „Hysterese beim Breakpoint“ eher mit „Bei der Landung klappert möglicherweise der Klodeckel“ vergleiche.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

wobei ich aber das Problem „Hysterese beim Breakpoint“ eher mit „Bei der Landung klappert möglicherweise der Klodeckel“ vergleiche.

Ich finde den Vergleich unpassend. Das Problem des bei der Landung klappernden Klodeckels ist real.

LLAP 🖖

[JürgenB]

Hallo,

erinnert mich irgendwie an Dark Star (aus dem Gedächtnis):

Wir wurden getroffen! <Langeweile>
Der Frachtraum xy ist weg! <Langeweile>
Da war das Klopapier gelagert! <Panik>

Gruß
Jürgen

[Matthias Scharwies]

Servus!

Hello Mr. Murphy,

tolles Beispiel. Sollte mMn ins Wiki unter Tutorials oder Praxistipps!

Eigentlich hast du dir ein <I> gekauft.

Andererseits wird flexbox hier erklärt:

• CSS/Anwendung_und_Praxis/Layout_mit_Flexbox#Verschiedene_Darstellungen_je_nach_Viewport

Eines würde mich persönlich noch stören:
Die Hysterese zwischen der Darstellung untereinander/nebeneinander fehlt oder ist zu klein. Das könnte zur Unbedienbarkeit führen. Kann man die vergrößern?

Ich habe den Begriff grad gegoogelt und bin mir auch nicht klar, was damit gemeint sein könnte.

Liebe Grüße
Tom S.

Herzliche Grüße

Matthias Scharwies

[einsiedler]

Ja stimmt. MrMurphy gibt ne Menge derart gute, leicht verständliche Anleitungen. Will mal kein Link setzen nacher passt es ihm nicht!

Übrigens TS, wann meldeste Dich mal? Oder wird das nix?

[TS]

Hello,

Übrigens TS, wann meldeste Dich mal? Oder wird das nix?

Doch ;-)

Liebe Grüße
Tom S.

[einsiedler]

Na da bin ich aber mal gespannt! Grüße aus Münster

[einsiedler]

Ne, das wird nix mehr... Nunja...

[Gunnar Bittersmann]

@@MrMurphy1

Beispielseite

Dass Listen von Links durchaus auch als Listen ausgezeichnet werden sollten, sollte dir bekannt sein. section wäre wohl besser nav, sodass das eher so aussehen sollte:

<nav>
	<ul>
		<li><a href="">India</a></li>
		<li><a href="">USA</a></li>
		<li><a href="">Italy</a></li>
		<li><a href="">Germany</a></li>
		<li><a href="">Austria</a></li>
	</ul>
</nav>

Es ist vermutlich einfacher, das auch bei schmalem Viewport eine Flexbox sein zu lassen und per media query lediglich flex-direction umschalten.

☞ Beispiel

LLAP 🖖

[TS]

Hello,

der Wettkampf ist eröffnet? ;-)

Ist so ja viel schlanker.
Aber kannst Du dann wenigstens noch eine Hysterese einbauen?

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@TS

Aber kannst Du dann wenigstens noch eine Hysterese einbauen?

Kann ich.

Zum Sinn: ’nuff said.

LLAP 🖖

[TS]

Hello,

Aber kannst Du dann wenigstens noch eine Hysterese einbauen?

Kann ich.

Herzlichen Dank.
Kommt in meine Sammlung! :-)

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@TS

Aber kannst Du dann wenigstens noch eine Hysterese einbauen?

Kann ich.

Herzlichen Dank.
Kommt in meine Sammlung! :-)

Dass das keine echte Hysterese mit verschiedenen Breakpoints zum Hin- und Herschalten ist, sondern ein Fake-Hysterese, hast du aber bemerkt?

LLAP 🖖

[Rolf B]

Hallo @@qyubert,

Falls du mit der bisherigen Diskussion oder dem Beispiel von Mr. Murphy noch nichts anfangen kannst: es gibt Laborseiten für Webs, z.B. Codepen oder jsfiddle. Vielleicht kannst du in einer von denen dein Problem darstellen, frei von firmenspezifischen Dingen. Dann haben wir deinem Code als Basis für weitere Hinweise.

Falls du schon zufrieden bist - ok. Sag's nur kurz.

Rolf

[Matthias Scharwies]

Servus!

Hallo zusammen,

ich habe eine Seite eingerichtet, bei der die Buttons schön aussehen, wenn der Browser-Zoom zwischen 90% und 1005 liegt.

Daher würde ich gerne den Zoomfaktor für diese Seite standardmäßig auf 90% einstellen. Könnt Ihr mir sagen, wie das geht? Gibt es dafür einen bestimmten Befehl?

Das was Rolf B mit dem Haus und Efeu gesagt hat, kann ich nur unterstreichen.

Mit einer CSS-Anweisung könntest Du auf 90% zoomen.

Dafür gibt es transform: scale()

(Eine Suche nach zoom im Self-Wiki hätte dich auf die obsolete Eigenschaft zoom geführt, die dann zu transform: scale() führt.)

Ein mögliches Teil eines Stylesheets könnte so aussehen:

body {
  transform: scale(0.9);
}

Herzliche Grüße

Matthias Scharwies

[Matthias Apsel]

Hallo Matthias Scharwies,

Das was Rolf B mit dem Haus und Efeu gesagt hat, kann ich nur unterstreichen.

body {
  transform: scale(0.9);
}

Was man aber unterlassen sollte (Haus und Efeu).

Bis demnächst
Matthias