Webseite auf iPad

Druckbare Version

16.08.2014, 22:16
Emma

Webseite auf iPad

Hallo zusammen,

ich habe eine Webseite mit Contao erstellt und auf dem Laptop läuft die wunderbar. Ich habe im Layout eine Breite von 1100 Pixel vergeben.
Aus dem Buch von Peter Müller Contao 3/ Seite 502 habe ich alle Einstellungen für mobile Seiten vorgenommen.
Auf einem iPhone sieht es auch gut aus und wenn ich das Telefon drehe dann passt sich die Seite an.

Auf meinem ipad bekomme ich das nicht hin. Die Seite passt nur rein wenn ich mit einem viewport arbeite, den ich auf initial scale 0.9 stelle. Wenn ich das ipad drehe, dann passt da gar nichts mehr.

Schaue ich mir die Seite von Peter Müller an (contaobuch.de) stelle ich fest, das dort alles passt und auch wenn das ipad gedreht wird passt sch die Seite an.
Muss ich noch mehr einstellen?

Ist das evtl. ein Fehler in der aktuellen Contao Version?

Ich hoffe der eine oder andere hier kann etwas Licht ins dunkel bringen.
17.08.2014, 11:07
magicsepp

Zitat:

Zitat von Emma

...
Ist das evtl. ein Fehler in der aktuellen Contao Version?

wie sieht das denn mit der offizellen Demo unter http://demo.contao.org/en/ aus?
17.08.2014, 11:18
tab

Ich bin mir nicht sicher, ob das iPad überhaupt als mobiles Gerät eingestuft wird. Möglicherweise wird da einfach die Desktop-Variante deiner Seite ausgeliefert.
17.08.2014, 11:27
kos

Zitat:

Zitat von tab

Ich bin mir nicht sicher, ob das iPad überhaupt als mobiles Gerät eingestuft wird.

Wird es nicht!

Siehe TL_Root\system\config\agents.php Zeile 23 (Contao 3.3.3)

PHP-Code:

$GLOBALS['TL_CONFIG']['os'] = array ( ... 'iPad' => array('os'=>'ios', 'mobile'=>false), ... );
17.08.2014, 11:59
Emma

Danke Karl, ich habe jetzt die Einstellung verändert! Fürs erste reicht mir das:-)
Mit der offiziellen Demo funktioniert das auch einwandfrei, ich werde mich also in der kommenden Woche mal raussetzen und schauen wo die Unterschiede zu meiner Version (meinem Layout und meinem CSS) ist. So wie es aussieht habe ich einen Fehler gemacht!

gruß
22.08.2014, 12:57
pmmueller

Das iPad wird von Contao wie erwähnt nicht als mobiles Gerät eingestuft, daher wird ein "mobiles Seitenlayout" nicht

Einige kurze Anmerkungen noch:
- Ohne einen Link können wir nichts zu deiner Site sagen.
- contaobuch.de ist nicht wirklich für mobile optimiert (960px Breite und ab dafür)
- Es ist kein Fehler in der Contao-Version.
- Eine Änderung der agents.php löst dein Problem nicht (never edit core-files)

In der Ende September erscheinenden vierten Auflage des Buches wird die Beispielsite mit Media Queries "responsiv" gemacht, sodass sie sich ohne mobiles Seitenlayout unterschiedlichen Viewports anpasst. Contao bietet zusätzlich noch "mobile Seitenlayouts" und "12-Spalten Grid", die danach im Buch beschrieben werden, die aber nicht jeder brauchen wird.
22.08.2014, 14:08
Emma

Natürlich weiß ich das diese Änderung mein Problem nicht lösen wird. Ich habe das auch wieder rückgängig gemacht:-)
@Peter Müller: ich kenne deine Bücher über Contao und die haben mir sehr geholfen mit dem System zurechtzukommen. Danke für den Hinweiß auf die vierte Auflage, ich werde dort ein Blick reinwerfen.

Zur Zeit schaue ich viel im Internet um mit den Media Queries etwas vertrauter zu werden. Nebenbei habe ich die neue Contao Beispielseite geladen und arbeite mich da durch. Ist viel Arbeit aber ich glaube es wird sich lohnen.

Mit anderen Worten, ich habe das Projekt erst einmal abgebrochen und lege lieber noch ein paar Grundlagen.
22.08.2014, 14:40
pmmueller

Zitat:

Zitat von Emma

@Peter Müller: ich kenne deine Bücher über Contao und die haben mir sehr geholfen mit dem System zurechtzukommen. Danke für den Hinweiß auf die vierte Auflage, ich werde dort ein Blick reinwerfen. Zur Zeit schaue ich viel im Internet um mit den Media Queries etwas vertrauter zu werden.

Danke für das Kompliment, und wenn dir mein Contaobuch geholfen hat, wirf doch mal einen Blick auf <werbung>"Flexible Boxes"</werbung> (Link ist in meiner Signatur). Darin werden auch Media Queries erläutert.

Zitat:

Mit anderen Worten, ich habe das Projekt erst einmal abgebrochen und lege lieber noch ein paar Grundlagen.

"Pausetaste gedrückt" klingt besser als "abgebrochen", aber wie man es auch nennt ist das wohl eine gute Idee. Nach dem Lernen der Grundlagen macht das dann mehr Spaß als so ein Stochern im Halbdunkel.
23.08.2014, 13:07
Emma

@Peter Müller: auf jeden Fall macht es dann mehr Spaß.
03.07.2015, 10:04
Schnippel

Ich habe mich lange um das Thema Responsive Contao-Webseiten herumgedrückt,
aber bei der neuen Auflage unserer Websiten möchte ich dies nun endlich mal anpacken.

Die Frage, die mich beschäftigt ist, ob ich Mobile first und mit Media-Queries,
oder ob ich die von Contao angebotenen Standard- und Mobile Layout-Variante nutze.

Bis zu welcher Viewport-Breite reicht die Mobile Layout-Version und ab wann wird die Standard-Layout-Version angezeigt?

Welcher Ansatz ist besser,
a - Contao Mobiles Layout für mobile Endgeräte nutzen, oder
b - im CSS mobile-first mit Media-Queries arbeiten, also alles in einem Standard-Layout reinpacken, ohne die Mobile Contao-Version?
03.07.2015, 10:12
Emma

responsive

Nachdem ich wie weiter oben von Peter Müller geschrieben die "Pause" Taste gedrückt hatte, habe ich nun einige responsive Webseiten erstellt!
Ich nutze die mobilen Templates die Contao bietet nicht! Ich nutzte ausschliesslich Media-Queries um Webseiten für alle Geräte anzupassen! Dieses Vorgehen wird auch von Google bevorzugt und empfohlen.

Nebenbei, man muss sich anschliessend um viel weniger kümmern, was den Content betrifft! Und auch ganz allgemein finde ich dieses Vorgehen mittlerweile sehr viel einfacher als alles andere.

Nebeneffekt, man kann jederzeit neue Media-Queries anlegen und definieren, ohne an der eigentlichen Seite etwas zu ändern.

Wenn du dich lange gedrückt hast, lese dich erstmal gut und gründlich ein. Es lohnt sich!
03.07.2015, 10:26
Schnippel

Wenn man die Website ohne das Contao-Mobile-Layout aufbaut, also über CSS mit Media-Queries arbeitet,
funktioniert dann noch das "Toggle-View" ? Oder muß ich da an anderer Stelle was einbauen, um dem Nutzer die Wahl der Ansicht
zu lassen, ob er ein für Handy optimierte Darstellung oder die Desktop-Darstellung sehen will?
03.07.2015, 10:58
tab

Toggle View schaltet zwischen dem Desktop- und Mobillayout um. Wenn es kein Mobillayout gibt, kann es auch nicht umschalten ;). In dem Fall wird ja alles von den media queries gesteuert. In der Regel also darüber, wie groß der Viewport ist.
03.07.2015, 11:18
Emma

ich nutze eine solche Möglichkeit nicht mehr! Die meisten mobilen Browser lassen eine entsprechende Einstellung zu.
Für mich steht die bequeme Nutzung der Besucher im Focus. Wenn wir ehrlich sind, die meisten stellen gar nichts um, die freuen sich wenn sie alle Inhalte schnell auf ihrem jeweiligen Gerät finden:-)

Aber wenn du das möchtest, findest du sicher im Internet ein entsprechendes Script.
06.07.2015, 16:10
pmmueller
Zitat:

Zitat von Schnippel

Bis zu welcher Viewport-Breite reicht die Mobile Layout-Version und ab wann wird die Standard-Layout-Version angezeigt?

Das mobile Seitenlayout ist unabhängig von der Viewport-Breite. Trigger ist der User-String des Browsers (UA Sniffing). Contao vergleicht den UA-String mit system/config/agents.php (unter anderem) und entscheidet dann, welches Seitenlayout serviert wird.

Zitat:

Zitat von Schnippel

Welcher Ansatz ist besser,
a - Contao Mobiles Layout für mobile Endgeräte nutzen, oder
b - im CSS mobile-first mit Media-Queries arbeiten, also alles in einem Standard-Layout reinpacken, ohne die Mobile Contao-Version?

Das ist kein entweder-oder. Die beiden ergänzen einander perfekt:
- Media Queries sorgen für die Anpassung an den Viewport, serviert aber für alle Geräte dasselbe HTML.
- Das mobile Seitenlayout ermöglicht es, anderes HTML an mobile Geräte zu senden (z. B. ein anderes Frontend-Modul).
In "Contao - das umfassende Handbuch" (der vierten Auflage meines Contaobuchs) wird das in Kapitel 18 und 19 ausführlich geschildert.