✔ [iPad/iPhone] 100% Weite eines div-Elementes wird nicht korrekt interpretiert

[Bomber]

Hallo,

mal ne (vielleicht) knifflige Frage für Leute die sich auch mit der Kompatibilität für iPads auskennen.

http://leistenbruch-duesseldorf.de/wip

Diese WIP Seite die ich momentan mache hat einen roten Hintergrund-DIV. Dieser sollte sich über 100% der Seiten-Fläche erstrecken, tut dies aber auf dem iPad/iPhone nicht. Im allgemeinen ist der ganze Content-DIV wohl zu klein/falsch gezoomt.

Wäre klasse wenn jemand nen Hinweis hätte, ne Idee wohin ich mich wenden könnte oder wo ich etwas nachlesen könnte.

Das Stylesheet findet man hier:

http://leistenbruch-duesseldorf.de/wip/stylesheet.css

Vielen Dank schonmal!

 

[CPoly]

<meta name="viewport" content="width=device-width, initial-scale=1">

https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
http://developer.apple.com/library/...eference/SafariHTMLRef/Articles/MetaTags.html

 

[Bomber]

Hallo,

erstmal DANKE!

Ich habs mal ausprobiert, momentan sieht die Seite auf dem iPhone was ich hier momentan zur verfügung habe aber noch komischer aus als vorher.

Ich versuche mich gerade durch den Link zu arbeiten, aber ich fürchte es dauert bis ich das verstanden habe.

Evtl. könntest du ja noch einmal so nett sein und gucken, was noch genau falsch ist, danke.

 

[CPoly]

Ich habe leider weder Smartphone noch Tablet hier.

Ein kurzer Blick über die Seite wirft folgende Frage auf:

Wozu verwendest du so viel position absolute/relative? Ich sehe dafür keinen Grund. Den roten Balken solltest du auch erreichen können, in dem du sowohl html, also auch body eine Hintergrundgrafik verwendest.

 

[Bomber]

Ich glaube ich weiß was du meinst, aber kann das denn das Problem sein?

Der Content DIV ist ja genauso verschoben wie der Div mit dem roten Hintergrund

 

[CPoly]

Irgendwie versuchen die Smartphone Browser ja einen möglichst sinnvollen Teil der Seite in den Viewport zu setzen. Wenn du allerdings deinen Content absolut positionierst, gibt es da wohl Probleme. Was im Detail jetzt bei dir die Probleme verursacht weiß ich nicht. Ich würde einfach mal damit anfangen das zentrale DIV nicht mehr absolut und seine Kinder nicht mehr relativ zu positionieren.

 

[Bomber]

Hallo,

habe deinen Tipp befolgt und den Hintergrundstreifen in rot mit zwei verschiedenen Hintergrundbildern realisiert.

Dadurch funktioniert die Seite jetzt auch ohne die META Anweisung ausreichend gut. Der Content div ist zwar nicht ganz zentral aber fast.

Danke jedenfalls!