SebastianJu: Webseite in % als Maßangabe. Problem mit Schriftgröße

Hallo,

aus irgendeinem Grund meint meine Freundin es wäre gut wenn eine Webseite sich an die Größe des Browsers anpassen würde. Dafür hat sie jetzt ihre Webseite mit Prozent-Maßen erstellt. Das scheint soweit zu klappen. Nur die Schriftgröße macht nicht mit.

Die Prozentangaben bei Divs usw beziehen sich wohl auf die Browserbreite. Nur bei der Schriftgröße bezieht sie sich auf die Größe der Schrift. Im Ergebnis passt sich die gesamte Seite an die Browserbreite an aber eben nicht die Schrift. Jetzt will sie das mit Javascript nachrüsten was meiner Meinung nach noch User-unfreundlich ist.

Gibt es dafür eine CSS-Lösung?

Danke!
Sebastian

  1. Hi,

    aus irgendeinem Grund meint meine Freundin es wäre gut wenn eine Webseite sich an die Größe des Browsers anpassen würde.
    Gibt es dafür eine CSS-Lösung?

    #freundin { display:none; }

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
    1. Hi,

      aus irgendeinem Grund meint meine Freundin es wäre gut wenn eine Webseite sich an die Größe des Browsers anpassen würde.
      Gibt es dafür eine CSS-Lösung?
      #freundin { display:none; }

      Im Ernst: das Ansinnen, die Schriftgröße nach der Fenstergröße zu richten, erscheint mir äußerst unsinnig.

      Nur weil ich an einem kleineren Bildschirm (z.B. so ein Mobiltelephon ...) sitze und z.B. daher das Browserfenster kleiner ist, werden meine Augen nicht besser.
      Wenn der User das Browserfenster vergrößert/verkleinert, dann doch wohl, um mehr/weniger Informationen gleichzeitig überblicken zu können, nicht, um dieselben Informationen in anderer Schriftgröße zu sehen.

      M.E. sollte man möglichst gar nicht an der vom User in seinem Browser konfigurierten Schriftgröße ändern. Der User hat sich die ja so eingestellt, weil er damit zurechtkommt.

      cu,
      Andreas

      --
      Warum nennt sich Andreas hier MudGuard?
      O o ostern ...
      Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
      1. Im Ernst: das Ansinnen, die Schriftgröße nach der Fenstergröße zu richten, erscheint mir äußerst unsinnig.

        Nur weil ich an einem kleineren Bildschirm (z.B. so ein Mobiltelephon ...) sitze und z.B. daher das Browserfenster kleiner ist, werden meine Augen nicht besser.
        Wenn der User das Browserfenster vergrößert/verkleinert, dann doch wohl, um mehr/weniger Informationen gleichzeitig überblicken zu können, nicht, um dieselben Informationen in anderer Schriftgröße zu sehen.

        M.E. sollte man möglichst gar nicht an der vom User in seinem Browser konfigurierten Schriftgröße ändern. Der User hat sich die ja so eingestellt, weil er damit zurechtkommt.

        Da rennst du bei mir offene Türen ein... ich sag ihr das ja auch. Sie meint aber es wäre alles zu sehen was man sehen kann. Einen größeren Ausschnitt braucht man also nicht. Und sie meint dass User nicht wissen würden dass man die Schrift usw vergrößern kann im Browser. Mag ja bei manchen stimmen. Und dass diese intuitiv versuchen würden die Webseite und Schrift größer zu machen indem sie das Browserfenster größer machen.

        Ich stimme damit zwar nicht überein aber... sie will das halt so... :)

        Gibt es da eine Möglichkeit ohne Javascript?

        1. Lieber SebastianJu,

          Gibt es da eine Möglichkeit ohne Javascript?

          nein.

          Liebe Grüße,

          Felix Riesterer.

          --
          ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
          1. Gibt es da eine Möglichkeit ohne Javascript?

            nein.

            Schade... na dann muss sie es eben mit Javascript machen...

          2. @@Felix Riesterer:

            nuqneH

            Gibt es da eine Möglichkeit ohne Javascript?

            nein.

            Sicher nicht? Mit SVG sollte das doch gehen.

            Qapla'

            --
            Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
            (Mark Twain)
            1. Sicher nicht? Mit SVG sollte das doch gehen.

              SVG ist ein Vektorgrafikformat, da kannst du deine Webseite gleich als PNG oder JPG reinpacken und width und height des Bildes auf 100% setzen - ich denke es ist sogar im Sinne des OP, dass sich sowohl die Schriftgröße alsauch die "Laufweite" an die Proportionen des Browserfensters anpasst.

              SCNR

              1. @@suit:

                nuqneH

                SVG ist ein Vektorgrafikformat, da kannst du deine Webseite gleich als PNG oder JPG reinpacken und width und height des Bildes auf 100% setzen - ich denke es ist sogar im Sinne des OP, dass sich sowohl die Schriftgröße alsauch die "Laufweite" an die Proportionen des Browserfensters anpasst.

                Ich glaube, genau das war im Sinne des OPs Freundin. Und der Arme soll den Quatsch umsetzen, Pantoffel und drunter und so. ;-)

                Gegenüber eine Grafik* hat man mit SVG den Vorteil, dass die Schrift bei jeder Größe scharf ist.

                Qapla'

                * http://forum.de.selfhtml.org/archiv/2010/4/t197031/#m1321095

                --
                Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
                (Mark Twain)
                1. Gegenüber eine Grafik* hat man mit SVG den Vorteil, dass die Schrift bei jeder Größe scharf ist.

                  Diesen Vorteil hat man bei Klartext aber auf :p

        2. [latex]Mae  govannen![/latex]

          Da rennst du bei mir offene Türen ein... ich sag ihr das ja auch. Sie meint aber es wäre alles zu sehen was man sehen kann. Einen größeren Ausschnitt braucht man also nicht.

          Ja nu, wenn sie auch solche Kleidung trägt ^^

          Cü,

          Kai

          --
          ~~~ stur lächeln und winken, Männer ~~~
          Dank Hixies Idiotenbande geschieht grade eben wieder ein Umdenken
          in Richtung "Mess up the Web".(suit)
          SelfHTML-Forum-Stylesheet
      2. Nur weil ich an einem kleineren Bildschirm (z.B. so ein Mobiltelephon ...) sitze und z.B. daher das Browserfenster kleiner ist, werden meine Augen nicht besser.

        Deine Augen nicht, aber die Auflösung des Bildschirms in der Regel schon. Das iPhone 4 hat m.W. einen CSS-Viewport von 480x320 px, dabei stolze 326 ppi und ein CSS-px wird in 2 physikalische Pixel umgerechnet (Device Pixel Ratio = 2). Natürlich wäre es Quatsch, da dasselbe draufzupressen, wie auf einen gewöhnlichen 1280-Pixel-Bildschirm mit 100 ppi, auch wenn letztlich 960 physikalische Pixel erreicht werden. Aber so pauschal sehe ich da kein Problem.

        Wenn der User das Browserfenster vergrößert/verkleinert, dann doch wohl, um mehr/weniger Informationen gleichzeitig überblicken zu können, nicht, um dieselben Informationen in anderer Schriftgröße zu sehen.

        Ja, kann man so sehen. Das kommt aber m.E. ganz darauf an, was man präsentieren möchte. Bei PDF, SVG oder Flash ist das, was zu sehen ist, meist gleich, man kann es nur hoch- und herunterzoomen. Was ist daran schlimm? Klar, bei PDF kann man ggf. mehrere Seiten nebeneinander darstellen.

        Mathias

        1. Deine Augen nicht, aber die Auflösung des Bildschirms in der Regel schon. Das iPhone 4 hat m.W. einen CSS-Viewport von 480x320 px, dabei stolze 326 ppi und ein CSS-px wird in 2 physikalische Pixel umgerechnet (Device Pixel Ratio = 2). Natürlich wäre es Quatsch, da dasselbe draufzupressen, wie auf einen gewöhnlichen 1280-Pixel-Bildschirm mit 100 ppi, auch wenn letztlich 960 physikalische Pixel erreicht werden. Aber so pauschal sehe ich da kein Problem.

          Ich sehe diesbezüglich auch kein technisches Problem - beim Zoomen ändert sich die Viewportgröße des iPad nicht, das iPhone wird ähnlich funktionieren.

          Es ist lediglich _äußert_ unpraktisch für Fließtext.

          Bei einer Teaser-Seite mit einem zentrierten Text, für Präsentationen mit wenig Text oder ähnliche Dinge mag das durchaus eine Existenzberechtigung haben - aber für Fließtext, ich bitte dich :)

  2. Die Prozentangaben bei Divs usw beziehen sich wohl auf die Browserbreite. Nur bei der Schriftgröße bezieht sie sich auf die Größe der Schrift. Im Ergebnis passt sich die gesamte Seite an die Browserbreite an aber eben nicht die Schrift.

    Was ihr vorschwebt ist wohl ein Zoomen, wie man es etwa von PDFs kennt. Prinzipiell ergibt es Sinn, den zur Verfügung stehenden Platz auszunutzen, indem man auch die Schrift mit vergrößert. Zumindest ist es Quatsch, alleine die Container zu verbreitern, wenn das Fenster breiter wird.

    Sinnvoller ist m.E. die Einheit »em« für die Breiten der Container/Spalten zu verwenden. Denn mit em lässt sich die Breite in Relation zur Schrift angeben. Damit sind überhaupt zuverlässige Zeilenlängen möglich, welche für die Lesbarkeit sehr wichtig sind. Wichtiger als dass die Schriftgröße mit der Fensterbreite skaliert.

    Das alleine sorgt natürlich nicht für eine optimale Ausnutzung des zur Verfügung stehenden Platzes. Flexibilität würde ich daher mit min-width und max-width sowie CSS Media Queries hinzufügen. Damit kann man das Layout umbauen, wenn der Viewport besonders schmal oder besonders breit ist.

    Jetzt will sie das mit Javascript nachrüsten was meiner Meinung nach noch User-unfreundlich ist.

    Wieso?

    Mathias