Seitenlayout je nach Fenstergröße zoomen
Rot-Fuxs
- design/layout
Ich wünsche allen einen gemütlichen Sonntag! ^^
Ich möchte gerne etwas austesten. Und zwar habe ich ein Layout, bei dem der Inhalt vor allem auf die Mitte des Bildschirms zentriert ist.
Nun teste ich gerade verschiedene Varianten, wie ich die Darstellung - gerade bei kleinen Browserfenstern bzw. geringen Bildschirmauflösungen - möglichst benutzerfreundlich gestalten kann.
Beim Test auf einem Smartphone ist mir dann der Gedanke gekommen, wie wohl am Rechner ein Zoom-Effekt wirken würde.
Folgendes:
Der gesamte Seiteninhalt (<div>-Bereiche, Grafiken, etwaiger Text, PHP-Formular-Felder) wird bei Unterschreitung der min-width-Einstellung des <body>-Tags prozentual verkleinert. So, dass der wichtige Teil der Seite immer im Blick ist, egal wie sehr der Anwender das Fenster auch verkleinert, bzw. wie alt und rückständig der PC-Monitor auch ist.
Geht das? Wenn ich einfach die objektspezifischen width- und height-Werte ändere, wird das Objekt dabei nicht verkleinert, oder?
Über Ideen und Anregungen wäre ich sehr dankbar! ^^
Gruß
Rot-Fuxs
PS: Wenn es Möglichkeiten gibt, sollten diese möglichst kompatibel zu den gängigsten Browsern sein. Wenn es beispielsweise nur auf dem Firefox, nicht aber beim IE und Safari und Opera und watt so gibt geht, bringt mir das ja leider nicht viel. ;-)
Ich wünsche allen einen gemütlichen Sonntag! ^^
danke :-)
Geht das? Wenn ich einfach die objektspezifischen width- und height-Werte ändere, wird das Objekt dabei nicht verkleinert, oder?
ich hab sowas schon mal gemacht und einigermassen hingebracht. aber was meinst du mit objekt?
ich hab sowas schon mal gemacht und einigermassen hingebracht. aber was meinst du mit objekt?
Mit Objekt meine ich z.B. die Grafik (oder das PHP-Formular-Dings). Wenn man da die Abmessungen verändert wird das Bild ja nicht kleiner, sondern wird einfach nicht komplett angezeigt. Oder vertuh ich mich jetzt.
Ich hätte gerne sowas wie eine Style-angabe im CSS-Bereich: "Display : 80%".
Und dann eine ganze function im Script-Breich, oder sowas:
function zoom_80 {
if (width <= 12345px) {
Display = "80%"
}
else {
Display = "100%"
}
}
Und das dann etwas umfangreicher, sodass es die Anforderungen der meisten Anwender abdecken sollte.
Natürlich ist das jetzt eine theoretische Wunschkonstruktion.
Aber vielleicht gibt es ja trotzdem irgendwelche Möglichkeiten. Wie hattest du das denn damals realisiert?
Gruß
Rot-Fuxs
Ich hätte gerne sowas wie eine Style-angabe im CSS-Bereich: "Display : 80%".
Und dann eine ganze function im Script-Breich, oder sowas:
function zoom_80 {
if (width <= 12345px) {
Display = "80%"
}
else {
Display = "100%"
}
}
>
> Und das dann etwas umfangreicher, sodass es die Anforderungen der meisten Anwender abdecken sollte.
<http://www.w3.org/TR/css3-mediaqueries/> ist ziemlich genau das, was du willst :)