Nochmal Responsive

[Birden]

Hallo

Für Mobile Geräte erstellte ich ein eigenes Theme, dies ist im Seitenlayout bei Layout für mobile Seiten eingebunden. Nur, wenn ich das Browserfenster in der Breite kleiner mache, wechselt es nicht automatisch auf das mobile Theme. An was könnte dies liegen?

Also das mobile Theme funktioniert, wenn ich es manuell (User Agent Switcher) umstelle.

[MacKP]

Hallo Birden,
das liegt einfach daran, das ein schmales Fenster nun mal nicht bedeutet, das es Mobile ist. Dein Rechner wird ja nicht auf einmal mobile und ist in der Tasche tragbar ;-)

Es wird für dieses Verhalten geschaut ob es ein Mobiles Gerät ist. (Smartphone oder Tablet).

Wenn du das bei einem schmalen Browserfenster auch kleiner haben willst oder so, dann machst du das eben nur mit CSS.

Viele Grüße

[Mag....]

Hallo erstmal,

also du testet das Mobile CSS im Browser? Wenn ja dann wird das nichts....
Hatte das auch so getestet und bin reingefallen...

Hab zwar nur ein Smartphone mit Android, aber dort teste ich das dann direkt ;-)

Es gibt aber von Android / iOS spezielle kits wo du installieren kannst und das direkt testen kannst...

http://www.thewebdesignbay.com/web-d...droid-emulator

VG
Marco

[Birden]

Also auf https://contao.org oder http://www.time.com/ scheint es ja zu gehen ...

[Toad]

https://addons.mozilla.org/en-US/fir...gent-switcher/


ohne Worte. (zu faul)

[Birden]

Bei eingebundenem Layout-Builder wird unterhalb einer Browserfensterbreite von 768px Holy-Grail abschaltet und die Floats werden entfernt. Das sollte in jedem Browser ohne Zusatztools funktionieren. Ansonsten bring das ganze nichts.




Nicht Contao Beispiele
Zurb

http://foodsense.is/

[Birden]

Es stellt sich daher die Frage weshalb, wenn Holy-Grail abschaltet und die Container gefloatet werden, nicht auf das „Layout für mobile Seiten“ zugegriffen wird?

[Toad]

Weil den Browser sagt er wäre nicht Mobile. User Agent halt. Opera sagt er wäre Opera, nicht Opera mobile.

[MacKP]

Äh.. das ganze hat immer noch nichts mit Mobile zu tun.
Die Mobile Variante greift, wenn es sich um ein 'mobiles' Gerät handelt.
Wenn man einfach nur das Fenster klein macht, dann greifen @media Angaben. Nicht mehr und nicht weniger.
Zu @media findest du hier im Forum aber auch im Internet jede Menge Material.

Du versuchst gerade 2 komplett unabhängige Dinge miteinander in Einklang zu bringen. Löse dich von dieser Vorstellung.

Viele Grüße

[Birden]

Ich würde mir gerne ein mit Contao gestaltete responsive Webseite ansehen, wenn ich eine wüßte. Denn außer https://contao.org ist mir keine bekannt, die den Namen „responsive“ verdient. (Wobei auch bei der die Suchfunktion verschwindet. Könnte aber auch gewollt sein.)

[MacKP]

Dann schau dir doch mal die aktuelle Fallstudie an: https://contao.org/de/case-studies/show/593.html

So oder so ist es aber total egal ob das mit Contao gemacht wird oder nicht. Ist eben wie gesagt alles pures CSS.

Viele Grüße

[Birden]

@MacKP: Eine Schöne Grid Seite.

Aber wie sieht es einer mit dem Layout-Builder erstellen Seite aus?

[freak_me11]

Aber bei der Fallstudio switcht es doch auch zur mobile-Version um oder? Die Navigation verändert sich komplett. Das kann eigentlich nicht nur CSS sein oder? Oder wird per media querie die "normale" Navigation auf display:none; gesetzt und die "neue" wird eingeblendet?

[Toad]

nur css: http://www.alistapart.com/articles/holygrail/

[Nina]

Aber wie sieht es einer mit dem Layout-Builder erstellen Seite aus?

Die Seite läuft über die normale Layoutbuilder CSS von Contao + Gridsystem.

Beim Gridsystem binde ich in diesem Fall aber nicht die "Responsive Grid"-CSS aus dem Contao-Framework ein, sondern eben eigene Stylesheets. Der Grund dafür ist, dass ich ein feineres Rastersystem haben wollte (vor allem für spätere Erweiterungen der Seite, die momentan noch im Bau sind) und zudem mehr Abstufungen in den Media Queries wollte. Technisch gesehen ist es aber das gleiche Grid-System wie das Grid aus dem Contao-Framework.

[Nina]

Aber bei der Fallstudio switcht es doch auch zur mobile-Version um oder? Die Navigation verändert sich komplett. Das kann eigentlich nicht nur CSS sein oder? Oder wird per media querie die "normale" Navigation auf display:none; gesetzt und die "neue" wird eingeblendet?

In dem Fall ist es tatsächlich nur per CSS. Später (nächstes Jahr) kommt dort noch ein "richtiges" Mobillayout dazu, aber für den Start läuft das alles über das selbe Layout, wobei je nach Viewport das Layout skaliert bzw. im kleinsten Viewport die Navigation via CSS "umgeblendet" wird.

[Toad]

Hallo.

mir ist hier auf der Arbeit gerade aufgefallen, dass hier garnichts auf dem IE8 umswitched. Auf anderen Browsern werden die Spalten ja unter #main geschoben. im IE8 nicht.

Kann das jemand bestätigen?

[electricarts]

Der IE 8 unterstützt keine Media Queries …


Viele Grüße


Mario

[BugBuster]

Da gibt's Abhilfe wenn benötigt.
http://code.google.com/p/css3-mediaqueries-js/

[Sitting Bull]

Da gibt's Abhilfe wenn benötigt.
http://code.google.com/p/css3-mediaqueries-js/

Hallo BugBuster,

das funktioniert bei mir leider nicht. Habe das Script per

<script type="text/javascript" src="[myPath]/css3-mediaqueries.js"></script>

in den zusätzlichen Head-Tags des Layouts eingebunden. Wird auch geladen. Aber im IE8 tut sich gar nichts? Müssen noch irgendwelche Einstellungen in Contao vorgenommen werden?

Grüße
Sitting Bull

[BugBuster]

Sollte reichen. Ich habs selber nicht im Einsatz.

[pustefix]

Hallo miteinander,

ich häng mich hier mal dran weil ich grad auf dem Schlauch stehe.

wobei je nach Viewport das Layout skaliert bzw. im kleinsten Viewport die Navigation via CSS "umgeblendet" wird.

Wie bitte setze ich ein anderes Modul nur via CSS ein? Bei Ninas Tanzschulseite erscheint bei kleinem Viewport ein Select-Menue, bei der Contao.org die Navi für mobile Seiten, das alles nur per CSS? Wenn ja, wie??

Lieben Dank vorab sagt und beste Grüße sendet

pustefix

[Acta]

Moin also ich kann nur sagen wie ich das gelöst hab!

zwei Module -> Meine Normale Navi und meine Responsiv Navie via Quicklink

Die normale Navi hat -> #mainmenu
Die Quicklink -> #navresponsiv

@media (min-width: 650px) {
#navresponsiv {
    display: none;
}
}
@media (max-width: 650px) {
#mainmenu {
    display: none;
}
}

Und die zwei Dinge im CSS

D.h. wenn das Browserfenster unter 650 Pixel ist-> dann wird auf Quicklink umgestellt...