Darstellungsfehler auf iPhone seit Update auf Contao 3

**Geronimo82** · 02.11.2012, 23:21

Hallo,

seit dem Update auf die Version 3 wird das Seitenlayout seltsamerweise auf dem Rechner und auf dem iPad korrekt dargestellt, aber auf dem iPhone fehlt der Inhaltsbereich (einigkeit-autenzell-rettenbach.org). Was kann das sein? Ich wüsste nicht, dass ich irgendwas in Richtung mobiles Layout eingestellt hätte.

Beste Grüße

Gerhard

**andreas.schempp** · 03.11.2012, 09:29

Contao 3 liefert automatisch eine Art Responsive Design mit. Unter 768px greifen die Einstellungen der Container nicht mehr. Frag mich nicht nach dem Sinn...

**Geronimo82** · 03.11.2012, 15:02

Hm, ok, hab ja schon fast so etwas vermutet, wie kann ich das denn abschalten? Meine Stylesheets sind allesamt für alle Medien hinterlegt.

**Geronimo82** · 04.11.2012, 12:12

Also ich hab noch immer nicht gefunden wie ich das Layout, obwohl für alle Medien hinterlegt, auch wirklich auf allen Medien sichtbar bekomme, echt nervig, wenn man das iPhone so ganz völlig sinnlos ausschließt, das kann schließlich mehr als so mancher Desktop-Browser.

**Geronimo82** · 04.11.2012, 19:01

Hm, ich krieg's nicht hin, dabei ist mir gerade die Nutzung auf dem iPhone wichtig.

**pmmueller** · 05.11.2012, 09:06

Ich habe mir definitiv nicht ein Smartphone gekauft, um die Webseiten so zu sehen, wie sie auf einem "großen" Bildschirm aussehen. Es wird in nicht allzu ferner Zukunft vollkommen normal sein, dass Webseiten auf unterschiedlichen Geräten unterschiedlich aussehen

Aber abgesehen davon, ob eine Mehrspalten-Darstellung auf einem iPhone wirklich sinnvoll ist: Mit "Medien" hat das bei dir direkt nichts zu tun, nur mit der Bildschirmbreite. Der Layout Builder von Contao 3 stellt die Spalten untereinander dar, weil er weniger als 768px zur Verfügung hat. Das kannst du auch auf deinem Desktop-Browser simulieren, wenn du ihn kleiner als 768px machst. Ich persönlich finde das übrigens völlig genial, weil das meistens sinnvoll ist.

Mögliche Lösungen:
- Layout Builder deaktivieren (dann sind aber alle Mehrspaltenlayouts dahin)
- Ein Stylesheet mit Media-Query einbauen, die die vom Layout-Builder wieder rückgängig macht.

Der Layout-Builder ist das Stylesheet layout.css in assets/contao/css (oder so). Da gibt es auch eine "uncompressed" version, die für menschliche Augen besser lesbar ist. Schaue dir das an, wie das gemacht ist und erstelle dann ein internes Stylesheet, dass die Spaltendarstellung auch unter 768px macht.

Aber denke vorher vielleicht nochmal drüber nach, ob du die Energie nicht besser in eine absichtlich gestaltete mobile Version packen kannst als in eine "one size fits all"-Lösung

**pmmueller** · 05.11.2012, 09:13

Zitat von Geronimo82

auf dem iPhone fehlt der Inhaltsbereich (einigkeit-autenzell-rettenbach.org). Was kann das sein? Ich wüsste nicht, dass ich irgendwas in Richtung mobiles Layout eingestellt hätte.

Ich lese jetzt erst, dass der Inhaltsbereich "fehlt". Der sollte natürlich da sein.

Der Layout-Builder stellt lediglich #main, #left und #right *untereinander* dar, blendet aber nichts aus. Ich habe momentan leider keine Zeit, das auf deiner Site genauer zu untersuchen (erstens Urlaub und zweitens holpriges WLANgsam...), aber ich wüsste nicht, warum der Inhaltsbereich ausgeblendet werden sollte.

EDIT
Auf meinem S2 Galaxy ist der Inhaltsbereich sowohl im Hoch- als auch im Querformat vorhanden. Kalender, Ausprobieren etc. folgen dann darunter. Alles bestens also.

**Geronimo82** · 05.11.2012, 10:12

768 Pixel das erscheint mir recht beliebig. Und jeder der einen kleineren Anzeigebereich hat, sieht die beiden Spalten untereinander, ungeachtet dessen, dass es auch sonst noch einiges zerlegt und das Layout eine feste Breite hat und trotzdem breiter ist als der jeweilige Bildschirm? Ein gutes Beispiel wie man es nicht machen sollte, noch dazu wenn sowas noch nicht mal dokumentiert ist, bzw. man als Nutzer darauf hingewiesen wird, das muss man ja ggf. auch bei seinen Formatierungen berücksichtigen, damit die Website trotz der Änderungen noch benutzbar bleibt, das war gestern vielleicht ein Gefrickel, bis das iPhone überhaupt etwas angezeigt hat, so richtig schön ist die verbastelte Umsetzung noch immer nicht, aber das muss ich mir mal anschauen wenn ich sehr viel Zeit habe.

**BugBuster** · 05.11.2012, 10:31

Der wrapper bekommt aber durch contao ein "width:auto;" bei max-width 768, d.h. die Seitenbreite passt sich somit der Seite des Browsers an.
Tuts dass nicht, liegt es an deinem eigenem CSS.

Der Umstieg auf Holy Grail Layout in Contao 3 bringt Änderungen und neue Dinge mit die zu beachten sind.
Diese sind hier aber auch schon mehrfach erwähnt und auch angekündigt worden. Deswegen beschäftige ich mich ja auch seit Monaten damit.
Wenn dich das Holy ganz stört, na dann nimm den Layout Builder nicht und definiere die Spalten komplett selbst.
Nimm https://github.com/contao/core/blob/...compressed.css
als Vorgabe, lasse die media Dinger wech, füge noch deine gewünschte Seitenbreite und Spaltenbreiten ein und fertig.

**Geronimo82** · 05.11.2012, 14:16

Zitat von BugBuster

Nimm https://github.com/contao/core/blob/...compressed.css
als Vorgabe, lasse die media Dinger wech, füge noch deine gewünschte Seitenbreite und Spaltenbreiten ein und fertig.

Da steckt nicht mehr dahinter? Ja, dann ist das wirklich kein Problem. Aber was den CSS-Reset angeht kann das eigentlich nicht alles sein, oder? Also das oben, CSS-Reset und meine eigenen Formatierungen und fertig? Dann verzichte ich auf den Layout-Builder. Oder gibt's da doch noch einen Haken?

**Geronimo82** · 08.11.2012, 20:55

Hab' das jetzt mal ohne Layout-Builder umgesetzt, nur ist die rechte Spalte jetzt zu weit rechts, da scheint noch etwas zu fehlen. Nur was?

**Geronimo82** · 08.11.2012, 22:48

So, Problem ist gelöst, ich hatte den Inhaltsbereich - warum auch immer - auf 100 Prozent.

**djo** · 01.03.2013, 03:16

:-)
Also - wenn ich das Fenster kleinziehe, haut er mir ab 768px den Header komplett raus, weil height:auto wird.

Egal - ich werd's rausfinden. :-)

Liebe Grüße,
Daniel

PS: Contao 3 ist ein Traum. Das CMS ist so unfassbar schnell in jeder Interaktion - die Ladezeiten sind brillant. So sauber - toll!

**djo** · 10.03.2013, 23:57

Ach Mensch, perfekt! :-)

Danke, Peter Müller, für das Buch zu Contao 3. Damit werde ich definitiv weiter kommen - steht jedenfalls alles drin was man wissen sollte! :-)

**pmmueller** · 11.03.2013, 07:09

Woran lag's denn jetzt mit deinem Header?

**iku** · 14.04.2013, 12:13

Hi,
Ich habe jetzt einiges nachgelesen über das Thema CSS mit mobilen Geräten und der Darstellung beim Verwenden vom Layout Builder.

Heisst es in dem Fall, wenn ich möchte, dass meine Webseite auf den mobilen Gerät nicht optimiert sondern normal und halt alles kleiner dargestellt werden soll, dann muss ich den Layout Builder Haken im Template entfernen?

Dann muss ich aber mein layout oder default CSS anpassen, da ja dann auch im Browser normal alles verschoben ist?

Wie gehe ich da am besten vor? Jetzt ist kein Spalten Layout mehr vorhanden usw. Dadurch ist alles untereinander? Muss ich die main, header tags usw. anlegen?

**pmmueller** · 14.04.2013, 12:17

Zitat von iku

Heisst es in dem Fall, wenn ich möchte, dass meine Webseite auf den mobilen Gerät nicht optimiert sondern normal und halt alles kleiner dargestellt werden soll, dann muss ich den Layout Builder Haken im Template entfernen?

Nein. Dann hast du ja gar kein Layout mehr.

Du nimmst in dem Seitentemplate fe_page.html5 einfach nur die Zeile mit dem Meta-Viewport raus. Dann zoomen die Smartphones die Seite wieder klein.

**iku** · 14.04.2013, 12:38

Boahhh, genau das ist es !!! Vielen Dank. Vor lauter lesen und überlegen habe ich das wohl irgendwo nicht gesehen, dass es diese Variante gibt. Ich habe schon angefangen ein neues Layout zu erstellen...uff danke für die schnelle Antwort...

CONTAO FORUM + CONTAO = einfach genial......

**djo** · 18.04.2013, 17:04

Zitat von pmmueller

Woran lag's denn jetzt mit deinem Header?

Hallo Peter,

es hatte was mit dem Responsive-Grid zu tun. Mit einem

Code:

#header { height:175px!important; }

hat sich das Problem vorerst gelöst. Ich denke ich sollte mir die CSS-Klassen vom Responsive-Grid ansehen und die Media-Queries untersuchen.

Liebe Grüße,
Daniel

**seflpais** · 19.03.2014, 12:59

Liebe Profis,
als Laie komme ich bei diesem Problem nicht weiter. Wie ich sehe gibt es Lösungen. Ich weiß jedoch nicht, wo ich was ändern soll.
Seit dem Update aus 3.2 sieht meine Website leider auf Blackberry und iPhone fatal aus.

Das Logo ist ganz nach rechts verschoben. Die Verhältnisse stimmen nicht mehr und die Navigation ist nach unten gerutscht.

www.seeger-design.de

Im normalen Safari auf dem Mac und auch in firefox sehe ich keine Probleme.

Ich würde mich sehr über einen Lösungsvorschlag, Hinweise auf meine Fehler oder Tipps freuen.
Dankeschön!

**pmmueller** · 19.03.2014, 13:07

Hast du von einer Contao 2er-Version upgedatet?

Dann lies dir folgenden Blogbeitrag durch:
http://pmueller.de/blog/contao-3-web...responsiv.html

Kurzform: Backend - Templates - fe_page.html5 - <?php // echo $this->viewport; ?>

Deine Website sieht im Desktop-Browser übrigens genauso aus. Wenn ich das Browserfenster verkleinere, verschwindet das rechts platzierte Logo irgendwann im Pixelnirvana.

**seflpais** · 19.03.2014, 13:19

Ja, ich habe vom 2er geupdatet und dann lief nichts mehr.
Nur noch im abgesicherten Modus.
Ich habe alle Erweiterungen löschen müssen und jetzt ist es so.

Vielen Dank für die schnelle Antwort. Ich werde Deinen Link durchgehen.
Ja, jetzt, wo ich das Fenster zusammenschiebe ...

**cuco** · 19.03.2014, 14:07

Eine dreckige Variante für eine Seite mit fester Seitenbreite, die ich irgendwann mal auf die schnelle benutzt habe, war #wrapper mit einem width: 1000px; in der CSS zu versehen, wobei die Pixelanzahl natürlich zu der Breite passen muss, die auch in Contao als feste Designbreite eingestellt ist.
Nicht schön, läuft aber ^^

**varix** · 19.03.2014, 14:24

Hallo seflpais,

mit der Anleitung von Peter Müller kannst du das Verhalten "sauber" lösen. Folge einfach der Anleitung.
http://pmueller.de/blog/contao-3-web...responsiv.html

Grüße,
varix

**cuco** · 19.03.2014, 14:29

Hmm dessen Lösung für Desktop-Browser ist ja auch nicht viel anders als meine dreckige bzw. beinhaltet das sogar

**seflpais** · 20.03.2014, 12:30

Danke nochmals an alle!

Ich habe die Anleitung durchgeführt und hänge an Zeile 23 aus der CSS-Vorlage von Peter Müller.
Wo soll ich bei #left -> "right: /* Breite von #left aus dem Seitenlayout */ ;" eingeben?
(Ihr schreibt den Code wahrscheinlich irgendwo direkt runter. Ich verwende die Formularfelder ...)

Wenn ich nachher alles eingegeben habe, aktiviere ich im Layout diese neue CSS-Datei und theoretisch war es das dann?

Beste Grüße und SORRY für die Umstände!

**tab** · 20.03.2014, 12:39

Zitat von seflpais

Danke nochmals an alle!

Ich habe die Anleitung durchgeführt und hänge an Zeile 23 aus der CSS-Vorlage von Peter Müller.
Wo soll ich bei #left -> "right: /* Breite von #left aus dem Seitenlayout */ ;" eingeben?
(Ihr schreibt den Code wahrscheinlich irgendwo direkt runter. Ich verwende die Formularfelder ...)

Und was hast du da im Seitenlayout eingegeben als "Breite der linken Spalte" (Breite von #left) und "Breite der rechten Spalte" (Breite von #right) eingegeben? Diese Werte musst du eben verwenden in deinem CSS.