dynamische Darstellung einer Seite in versch. Auflösungen

[marco]

Hallo und Guten Tag,

wie kann man html- Dateien dynamisch an die Auflösung des Monitors anpassen?

Es gibt natürlich die Möglichkeit in einem kleinen Java- Script die Auflösung festzustellen und dann zu zwei verschiedenen Versionen der Internetseite zu wechseln (z.B. eine für 800x 600 und eine für 1024x 786), dies hat jedoch den Nachteil, dass man doppelte Seiten hat.

Gibt es eine andere Möglichkeit? Gerade in Bezug auf CSS und das Arbeiten mit verschieden Ebenen wäre es sehr viel praktischer!

Vielen Dank.
MARCO

[Christian Stehle]

Hi und gute Nacht,

du kannst natürlich dein komplettes Layout mit Tabellen aufbauen und so die einzelnen Elemente dynamisch, d.h. prozentual an die aktuelle Screengrösse anpassen.
Du könntest allerdings nur einige Elemente mit Hilfe eines Framesets dynamisch ändern (mit Javascript)
auf www.messepark.at hab ich Links am Screen einen Schriftzug in einem Frame. Bei einer Auflösung <= 600 in Höhe wird der kleine Banner angezeigt, bei einer Size >600 kommt eine grössere Version. Das Script steckt im Frameset selber, sodass die Auswahl beim Laden des Sets vonstatten geht.
Ausserdem hab ich die übrigen Navigationselemente in eine dynamische Tabelle reingebaut, sodass diese immer rechtsbündig zum Screen stehen. Man MUSS KEINE doppelte Site programmieren. Es reicht schon das geschickte Austauschen von einzelnen Elementen.

Gruss
Christian

Hallo und Guten Tag,

wie kann man html- Dateien dynamisch an die Auflösung des Monitors anpassen?

»»  Es gibt natürlich die Möglichkeit in einem kleinen Java- Script die Auflösung festzustellen und dann zu zwei verschiedenen Versionen der Internetseite zu wechseln (z.B. eine für 800x 600 und eine für 1024x 786), dies hat jedoch den Nachteil, dass man doppelte Seiten hat.

Gibt es eine andere Möglichkeit? Gerade in Bezug auf CSS und das Arbeiten mit verschieden Ebenen wäre es sehr viel praktischer!

Vielen Dank.
MARCO

[brand]

Hi!

Eine funktion a la document.scale(1024,768); gibt es nicht ;-)

Theoretisch könntest du aber die gesamte Seite per document.write() schreiben und bei den Größenangaben (der Tabellen, Layer, Bilder, Schrift) von der Fenstergröße und Auflösung abhängige Werte reinschreiben.
(Dies hat allerdings die Nachteile, daß der Besucher Javascript eingeschaltet haben muß, und daß bei einer Änderung der Fenstergröße die Seite neu aufgebaut werden muß)

Ich frage mich allerdings, was es für einen Sinn haben soll, die Seite an Auflösungen anpassen zu wollen. Weil

1)...hängt die Darstellung der Seite im Browser ebenso stark von der eingestellten Schriftgröße ab
2)...habe ich bis jetzt noch keine Seite gesehen, die mit 800*600 supertoll ausgesehen hat und mit 1024*768 absolut besch... oder umgekehrt. (manchmal gefallen mir sogar Seiten, die für 800*600 "optimiert" wurden mit 1024*768 sogar besser, oder ebenfalls umgekehrt)
3)...die Darstellung der Seite Teils auch vom Browsertyp abhängig ist

und außerdem müßte man dann auch noch Auflösungen wie 1152*864 und 1280*1024 berücksichtigen.

Fazit:
Ich halte es nicht für sehr sinnvoll, die Darstellung einer Seite im Browser des Besuchers absolut kontrollieren zu wollen. Erstens wirst du es ob der unterschiedlichen Auflösungen/Schriftgrößeneinstellungen/Fenstergrößen kaum schaffen, und zweitens handelst du dir mit derartigen Versuchen(über Javascript udgl.) meist mehr Probleme ein als du löst.

Prinzipiell:
Wenn du mit Tabellen arbeitest, kannst du ja %-Werte angeben. Und wenn du mit positionierten Layern deine Seite aufbaust, so würde ich die Seite auf eine Größe von 800*600 auslegen - bei größeren Auflösungen hat man dann einen kleinen Rand.

mfG
BRAND

[Patrick]

Hallo Marco und auch guten Tag (Abend)!

wie kann man html- Dateien dynamisch an die Auflösung des Monitors anpassen?

Ich habe auf Atomic Eggs folgende Lösung, allerdings brauchst Du dafür drei verschiedene CSS-Dateien. Ansonsten nur eine HTML-Version für jede Seite, vorausgesetzt, das Script wird am Anfang jeder Seite eingefügt. In dem Beispiel gibt es sogar 6 CSS-Dateien, die je nach Browser UND nach Auflösung aufgerufen werden. Hier musst Du schauen, ob es bei Deiner Seite notwendig ist, extra für IE und Netscape eine eigene CSS zu schreiben: In meinem Fall war es notwendig, aus dem Grund dass Netscape die font-size:12px anders darstellt als der IE (siehe: http://www.atomic-eggs.com/temp/compare.html).

<script language="JavaScript" type="text/javascript">
<!--

var klein  = (document.layers) ? ('atomns15.css') : ('atomie15.css');
var mittel = (document.layers) ? ('atomicns.css') : ('atomicie.css');
var gross  = (document.layers) ? ('atomns21.css') : ('atomie21.css');
var css_file = (screen.width < 1024) ? (klein) : ((screen.width == 1024) ? (mittel) : (gross));
document.write('<link rel="stylesheet" href="'+css_file+'" type="text/css">');

//-->
</script>

Entprechend anpassen, und schon dürfte die Sache funzen!

Hinweis: manche Browser wie Opera, kommen damit nicht klar, dass die CSS mittels "document.write" aufgerufen wird.

Bis danndann
PAF (patrickausfrankfurt), SELFSPEZIAL