Darstellung der Seite auf dem iPad linksbündig statt zentriert!

**Goody** · 30.12.2011, 10:58

Hallo zusammen,
auf allen Monitoren (auch wenn ich den User Agent "iPad" wähle) wird der #wrapper zentriert angezeigt. Nur auf dem iPad klebt der #wrapper links am Rand.
Mit der Erweiterung "browsercss" habe ich versucht mittels css die Ausrichtung zu korrigieren, aber es gelingt mir nicht. Hier der Link zur Seite.

Über einen Tip würde ich mich freuen.

Goody

**SFuchs** · 30.12.2011, 17:28

Mobile Browser werden dir die Seite so skalieren das sie optimal in den Viewport passt, darunter wird alles mit eingerechnet was Elemente breiter macht. Das können Paddings, Margins oder Elemente sein die du vielleicht auf Hidden gestellt hast. Erster Check ist daher der Browser den du kleiner machst, sobald vertikale Scrollbalken erscheinen obwohl deine Seite offensichtlich schmaler wird, hast du zusätzliche Breiten. Alternativ mit Firebug oder den Chrome Dev Tools die Elemente durchprüfen.

Quick&Dirty: Weis dem übergeordneten Element overflow:hidden zu, dann werden überlappende Elemente einfach abgeschnitten. Ist aber nicht ganz sauber, vor allem der Text ist dann nicht sauber umgebrochen.
Besser du korrigierst die Margins und Paddings der Childelemente so das sie in der Gesamtbreite die Breite des Wrappers nicht überschreiten.

Kleines Problem am Rande, Überschriften die der Browser nicht umbrechen kann können auch dazu führen das die Seite auf dem mobil Browser breiter gerendert werden und dann an den linken Rand gerückt werden.

**gregor** · 30.12.2011, 17:56

Hallo Goody,

google mal nach viewport.

Mit dem Metatag viewport kannst Du Breite bestimmen.
Wenn der Wert größer ist als der Wrapper, vielleicht klappt es dann mit dem zentrieren.

LG
Gregor

**Goody** · 31.12.2011, 09:02

Danke SFuchs und Gregor,

das werde ich machen. Und einen guten Rutsch!

Gruss Goody

**SFuchs** · 31.12.2011, 09:26

Wünsch ich dir ebenso

**gregor** · 31.12.2011, 12:19

Danke, Dir auch einen guten Rutsch.

Hier der Tag, der sollten funktionieren.

Code:

<meta name="viewport" content="width=1044" />

Einfach in der fe_page oder beim Seitentemplate unter "Zusätzliche Head-Tags" einfügen.
Den Wert bei width entsprechend Deiner Seite anpassen, bzw. soweit ändern bis es paßt.

LG
Gregor

**Goody** · 01.01.2012, 17:44

Hallo SFuchs, hallo gregor,

es lag am padding und margin. So benötige ich die Erweiterung "browsercss" gar nicht, um dem iPad ein eigenes CSS mitzugeben.
Die Lösungs-Möglichkeit mit dem "viewport" habe ich jetzt nicht weiter verfolgt.

Vielen Dank an euch beide.

Gruß
Goody