Viewports für verschiedene Bildschirmauflösungen und Browser

BildschirmaufloesungMöchte man das Layout einer Seite an eine bestimmte Bildschirmauflösung (z.B. 800x600px) anzupassen, reicht es nicht aus, die Bildschirmauflösung als Begrenzung des Designs zu definieren.
Je nach Browser und installierten Plugins müssen für den sichtbaren Bereich einer Internetseite (den sogenannten Viewport) noch die Pixel der Menü- und Scroll-Leisten abgezogen werden.

ViewportSteve Mulder hat die Viewports bei verschiedenen Bildschirmauflösungen in verschiedenen Browsern getestet und für die Bildschirmauflösungen 640x480px, 800x600px und 1024x768px die Größe der Viewports ausgemessen und übersichtlich aufgelistet.
Zusätzlich gibt er die jeweils optimale Größe der Viewports für die verschiedenen Bildschirmauflösungen an:

Sicherste Viewports für 640x480px

  • Mit Scrollbar: 584 x 290 px
  • Ohne Scrollbar: 599 x 290 px

Sicherste Viewports für 800x600px

  • Mit Scrollbar: 744 x 410 px
  • Ohne Scrollbar: 759 x 410 px

Sicherste Viewports für 1024x768px

  • Mit Scrollbar: 968 x 578 px
  • Ohne Scrollbar: 983 x 578 px

Original-Artikel lesen »

via perun


Kommentare & Trackbacks

  1. Kommentar von Gabi:

    Gravatar von Gabi

    Und dann kommt noch die Google-Toolbar dazu, der Web-Developer für Firefox, manche haben rechts die Office-Scrollbar und, und… es ist schwierig bis nicht möglich, die Oberfläche des Users zu erraten.

  2. Kommentar von molily:

    Gravatar von molily

    Ich möchte vehement widersprechen: »Sichere Viewports « sind Unsinn. Bitte verbreitet nicht irgendwelche Zahlen, auf die man sich vermeintlich verlassen kann. Viewport-Breiten sind nicht sicher. Das sind theoretische Rechnereien aus dem Jahr 2002, aber die heutige Realität ist mannigfach. Optimierung für postulierte, vermeintlich »sichere « Viewport-Breiten ist genauso problematisch wie die Optimierung für Bildschirmauflösungen.

    Empirische Untersuchungen widerlegen die Standard-Layout-Breiten

    Diese Messung zeigt etwa: Nur knapp 80% der Leute, die eine 1024 Pixel breite Auflösung haben, haben einen Viewport, der größer oder gleich der zitierten, angeblichen sicheren Viewport-Breite ist. Wähnt man sich auf der sicheren Seite, hat man gleich 20% der Besucher potenziell benachteiligt.

    Der Schluss von Bildschirmauflösung auf Viewport ist deshalb prinzipiell problematisch. Das ist eine Sache von Wahrscheinlichkeiten, nicht von Sicherheiten.

  3. Kommentar von Franziska:

    Gravatar von Franziska

    Hallo molily,

    vielen Dank für Deine Anregungen!

    Natürlich kann man nie genau wissen, welchen Viewport welcher Nutzer letztendlich hat.
    Genausowenig wie man weiß, welche Bildschirmauflösungen zum Anschauen einer Internetseite verwendet werden.

    Bestenfalls sollte ein Layout so gestaltet sein, dass es auf so vielen Ausgabegeräten wie möglich gut dargestellt werden kann.

    Trotzdem finde ich wichtig zu wissen, wie breit man die minimale Breite einer Seite setzen kann.
    Dafür sind die Ergebnisse des Beitrags für mich ein guter Ansatzpunkt.

    “Sicherster Viewport” bedeutet für mich weniger todsicherer Viewport, sondern eher “weitgehend sicherer” Viewport.

  4. Kommentar von max mustermann:

    Gravatar von max mustermann

    Mir leuchtet nicht ganz ein, wieso man Auflösung und Viewport nicht über javascript abfragen und dementspechend ein css dynamisch schreiben kann.
    Als Anregung hierzu:
    http://snipplr.com/view/5896/get-browser-viewport-width-and-height/

Kommentar schreiben

* Pflichtfelder