Entwickler-Ecke :: Thema anzeigen - CSS Position: fixed auf dem iPhone und co.

Aya - So 08.08.10 14:53
Titel: CSS Position: fixed auf dem iPhone und co.

Hi,

ich bastel z.Z. an einer neuen Webseite in der ich oben und unten einen Header, bzw Footer habe welcher immer fest an dieser stelle bleiben soll und der bereich dazwischen horinzontal scrollt.

Das klappt soweit wunderbar (Zumindest im Safari und Firefox, andere Browser habe ich nicht zum testen):
http://www.aya-chan.de/civil/japan2009

Nur, auf dem iPhone und iPad klappt es nicht.. hier hat das CSS Attribut "position: fixed;" keine wirkung.

Hat da jemand eine Idee wie ich das lösen könnte?

Danke,
Aya

Aya - So 08.08.10 15:07

Dude566 hat folgendes geschrieben :

Also ich betrachte mir die Seite gerade mit dem IPhone4 und es sieht so aus als wäre der Footer zwischen das 1. und 2. Bild gerutscht.

Jep das ist noch ein zusätzliches Problem wenn man das iPhone im LandscapeMode hält und die seite anschaut.. :(

BenBE - So 08.08.10 15:14

Was Du machen kannst, ist das Position-Attribut zweimal anzugeben: Einmal mit position:absolute; und dann noch mal gefolgt von position:fixed; für Browser, die das können. Deest dann über Browser-Weichen klären. Ggf. die unterschiedlichen CSS-Versionen via Server unterscheiden. Wer dann seine Browser-Kennung unbedingt umstellen muss, hat halt Pech.

Aya - So 08.08.10 15:19

BenBE hat folgendes geschrieben :

Das problem ist glaube ich da, dass das iPhone das "fixed" schon 'korrekt' interpretiert, nur eben die darstellung anders funktioniert.

Das iPhone rendert die komplette Webseite als hätte sie keine Scrollbalken und zeigt immer nur einen gewissen ausschnitt davon an. Dadurch wirkt es dann so als würde das 'fixed' ignoriert werden, wird es aber nicht wirklich.

Allerdings gibt es ja diverse Webseiten die oben und unten einen Header/Footer haben der auf dem iPhone auch statisch ist, allerdings hab ich das bisher immer nur mit vertikalem scrolling gesehen, und zusätzlich konnten diese Webseiten - glaube ich - nicht gezoomt werden :(

Martok - So 08.08.10 15:42

Eventuell könnte es was bringen, wenn du dem HTML und/oder BODY-Element eine feste Höhe gibst.

Wie man das dann bei Desktopbrowsern wieder hingedreht bekommt ist die andere Frage ;)

BenBE - So 08.08.10 15:57

@Martok: Ich sag ja: Serverseitig je nach Browser n andres Stylesheet ausliefern. Ist zwar Messy, aber durchaus mberer als irgendwelche Browser-Weichen. Zumal man dann sogar immer valides CSS ausliefern kann.

Aya - So 08.08.10 16:00

Gegen verschiedene Stylesheets für verschiedene Platformen/Browser hab ich prinzipiell nichts, allerdings hapert es ja schon daran das ich nicht weiß wie ich das korrekte verhalten via CSS hinbekommen kann auf dem iPhone :(

Aya - So 08.08.10 18:13

Ich hab es hinbekommen. Nicht ganz so schön wie ich es gern hätte, aber so geht es aufjedenfall erstmal.

Man kann festlegen welche Größe der Viewport haben soll, damit ist sichergestellt das Header und Footer immer weit genug ausseinander sind.

XML-Daten

1:	<meta name="viewport" content="width=xxx;" />

Den Header und Footer hab ich dann einfach als Background-Image für <body> festgelegt, so das es dort wo der eigentliche Header aufhört einfach weiter gestreckt wird.

Falls noch wer eine andere Idee hat, wie ich das Menü immer wirklich 'fixed' halten kann, immer her damit! :)

Aya~

Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2026 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!