Media queries, Mobiles Layout

[leooo]

Hallo.

Ich erstelle gerade meine Erste Website mit CONTAO 3.1.3 und möchte die Website natürlich auch auf dem iPhone, iPad hübsch aussehen lassen.

Dazu habe ich mal eine Test-mobile Seite in meiner CONTAO Installation erstellt. Dieser Seite hab ich dann ein Mobiles Layout zugewiesen wo ich als Framework den Layout Builder angeklickt habe. Header Höhe und die Breite der rechten Spalte sind in PX angegeben. Eine feste Breite hab ich der Seite nicht mitgegeben.

In dem Layout hab ich ein Stylesheet, wo ich dann bei Media queries folgendes eingetragen hab:

/* iPhone & iPod */ 
@media only screen and (max-device-width: 480px) and (orientation:landscape), only screen and (max-device-width: 320px) and (orientation:portrait) { }

/* iPad */ 
@media only screen and (max-device-width: 768px) and (orientation:portrait), only screen and (max-device-width: 1024px) and (orientation:landscape) { }

Wenn ich die Seite nun aufrufe, wird zwar alles hübsch skaliert, doch werden teilweise Styles nicht erkannt bzw. angewendet.
Das Body Hintergrundbild ist da, aber bei farbigen Hintergründen und Schriftformatierungen z.B. beim Menü werden die CSS Anweisungen einfach ignoriert.

Zu sehen ist das ganze unter: http://www.kitesurfwaveclinic.com/test-mobile.html

Woran kann das liegen?

Vielleicht hab ich auch einen Denkfehler in der ganzen Vorgehensweise...

Würde mich über einen Tip sehr freuen.

Mfg, leooo

[uwe]

Hallo leooo

Kennst du schon den Vortrag über Contao und responsive Layout?

http://pmueller.de/blog/vortrag-cont...dtag-2013.html

[leooo]

danke für den link. kannte ich noch nicht.

ich hatte mir extra das buch von peter müller für den urlaub bestellt. leider kam es trotz amazon prime erst zu hause an als ich schon am checkin stand. naja nun hab ich ja was zum stöbern.

viele grüße, leooo

[uwe]

Wenn ich die Seite nun aufrufe, wird zwar alles hübsch skaliert, doch werden teilweise Styles nicht erkannt bzw. angewendet.

Urlaub ist eine gute Sache, und das Buch auch

Auf deiner Seite wird eine CSS-Datei nicht gefunden:

http://jigsaw.w3.org/css-validator/v...rning=&lang=en

[leooo]

Hallo,

ich hab noch mal etwas weiter gelesen und probiert.

Was mich noch irritiert ist folgendes.

Ich habe eine CSS Datei für mobile Geräte im CONTAO Backend, wenn ich in dieser nun folgende Media Queries in dem Feld "Media-Query" eintrage um die iPads anzusprechen werden alle CSS Angaben die in der Datein stehen ignoriert.

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { #wrapper { width:50%; } }

Ist das so gedacht?

Müßten alle CSS Angaben dann in dem Media Query direkt stehen? Ich dachte dort trage ich dann nur diejenigen ein um spezielle Geräte anzusprechen....

Bin verwirrt... und nein es kommt nicht vom Brasilianischen Caiprinha )

Viele Grüße aus dem Sommer Brasiliens.
Leooo

[pmmueller]

In dem Feld steht nur die Media Query für das Stylesheet. Kein CSS.

Du kannst also nur eine Media Query Anweisung pro Stylesheet erstellen. Aber da die internen Stylesheets sowieso alle vereint und komprimiert werden, kannst du beliebig viele Stylesheets erstellen (Buch Kap. 7).

Mit deiner Media Query sprichst du übrigens keine iPads an, sondern Viewports zwischen den angegebenen Breiten. Fang gar nicht erst an, für einzelne Geräte zu optimieren. Das ist ein Fass ohne Boden...

[leooo]

Hallo Peter,

vielen Dank für Deine Antwort. Nein ich habe nicht vor für einzelne Gerät zu optimieren, das war nur ein Beispiel.

Kannst Du mir aber erklären warum die CSS Angaben nicht angewendet werden sobald ich

only screen 
and (min-device-width : 560px) 
and (max-device-width : 1136px)

in das Feld Media Query eintrage und es mir auf dem iPhone 5 oder auf http://www.responsinator.com/ anschaue?

Zu sehen unter...: http://www.kitesurfwaveclinic.com/test-mobile.html

Danke und viele Grüße, Leooo

[pmmueller]

Ich weiß nicht genau, was du erreichen willst, aber in deinem Stylesheet steht

@media only screen and (min-width: 560px) and (max-device-width: 1136px)

Spot the difference?

"Mobile Seitenlayouts" sind übrigens völlig unabhängig von CSS3 Media Queries. Sie werden über den User Agent getriggert. Welche das sind steht in system/config/agents.php.

[leooo]

Hallo Peter,

ok, scheinbar verstehe ich den Sinn/Anwendung von Media Queries noch nicht... Ich hab's so verstanden das die von mir in der CSS Datei angegeben Media Queries dafür da sind die CSS Datei nur auf Geräten anzuwenden die eine "(min-width: 560px) and (max-device-width: 1136px) haben.

Ich werde wohl einfach die mobilen Seitenlayouts nutzen, das verstehe ich wenigstens, glaube ich ;o)
Um auch das iPad damit anzusprechen müßte ich dann ja nur in system/config/agents.php. bei iPad "true" eintragen, richtig?

Macht das Sinn?

Kann's gar nicht abwarten das Buch von Dir was zu Hause rumliegt und nicht rechtzeitig ankam zu lesen.... naja 4 Wochen noch dann bin ich daheim.

Viele Grüße Leooo

[pmmueller]

"Spot the difference" meinte, dass du in deinem Beitrag weiter oben "min-device-width" geschrieben hast, in deinem CSS aber "min-width" geschrieben hast. "min-width" bezieht sich nicht auf das Gerät, sondern auf den Viewport des Browsers. "min-width" und "max-device-width" in einer Media Query zu mischen ist eher ungewöhnlich...

Die Media Queries haben mit den mobilen Seitenlayouts nichts zu tun. Du kannst eine Website völlig ohne mobile Seitenlayouts responsiv und mobile friendly und was weiß ich nicht alles machen. Mobile Seitenlayouts brauchst du nur, wenn du an bestimmte Geräte ein anderes HTML (Frontend-Module etc.) oder komplett andere Stylesheet ausliefern willst.

Das iPad ist aus Sicht von Contao kein mobiles Gerät. Warum würdest du das ändern wollen?

Versuche doch einfach mal zu beschreiben, was genau du eigentlich erreichen willst, und warum du immer wieder dieses "iPad" erwähnst