media query grundeinstellung

Hallo,

auf einem kleinen tablett werden Contao Seiten unterschiedlich gerendert. Chrome zeigt sofort die mobile Ansicht, Firefox die desktop version.

Mit welchen Grundeinstellungen in Contao kann ich das verändern? Ist es sinnvoll direkt die Layout.css zu ändern? Mich stört das, die desktop Seiten sind nicht wirklich geeignet (ausser für grosse Bildschirme eben ;) , nach dem Prinzip mobile first versuche ich so zu gestalten, daß die mobilen Seiten eigentlich auch auf dem PC gut wirken, aber umgekehrt geht nicht, folglich hätte ich nichts dagegen, daß zB ab 1000px abwärts die mobile Seite aufgerufen wird.
Was kann man da machen?

Danke
gruss
Thomas

Wie realisierst du die Ansichten? Durch Desktop- und Mobil-Layout oder durch Media Queries? Falls Media-Queries, wie sehen sie aus?

wie in dem Buch von peter Müller beschrieben,
also 2 Seitenlayouts eins für DT, eins für mobile, mit jeweils zugeordnetem CSS. Im DT Layout ist layout.css, responsive.css und reset.css aktiv, in der mobile Layout genau so, dazu eben die 2 versch. eigenen css Dateien desktop.css und mobile.css

Ansonsten habe ich an den Grundeinstellungen nichts geändert, probeweise einmal in der layout.css die 767px überschrieben, bringt natürlich nichts und wieder rückgängig gemacht.

Merkwürdig ist das verschiedene Verhalten der Browser, Chrome macht alles richtig, in Firefox und Opera wird zwar dank "responsive" nur einspaltig dargestellt, nur eben die destop version. Das ist insofern nicht gut, weil die Navigation umbricht, bzw. abgeschnitten wird.

Habe dazu im Netz folgendes gefunden https://github.com/contao/core/blob/...php#L14http:// vielleicht ist das mit verantwortlich.

Code:

---

$GLOBALS['TL_CONFIG']['os'] = array
(
        'Macintosh'    => array('os'=>'mac',        'mobile'=>false),
        'Windows CE'    => array('os'=>'win-ce',    'mobile'=>true),
        'Windows Phone' => array('os'=>'win-ce',    'mobile'=>true),
        'Windows'      => array('os'=>'win',        'mobile'=>false),
        'iPad'          => array('os'=>'ios',        'mobile'=>false),
        'iPhone'        => array('os'=>'ios',        'mobile'=>true),
        'iPod'          => array('os'=>'ios',        'mobile'=>true),
        'Android'      => array('os'=>'android',    'mobile'=>true),
        'BB10'          => array('os'=>'blackberry', 'mobile'=>true),
        'Blackberry'    => array('os'=>'blackberry', 'mobile'=>true),
        'Symbian'      => array('os'=>'symbian',    'mobile'=>true),
        'WebOS'        => array('os'=>'webos',      'mobile'=>true),
        'Linux'        => array('os'=>'unix',      'mobile'=>false),
        'FreeBSD'      => array('os'=>'unix',      'mobile'=>false),
        'OpenBSD'      => array('os'=>'unix',      'mobile'=>false),
        'NetBSD'        => array('os'=>'unix',      'mobile'=>false),
);

---

Contao entscheidet das anhand des User Agent Strings des Browsers. Wenn also auf dem Tablet ein Firefox für Desktop-Rechner installiert ist, dann ist das halt für Contao ein Desktop.

Besser sind eigentlich responsive Ansätze, also nur ein Layout für alle Geräte. Je nach Breite des Browsers werden die Inhalte unterschiedlich dargestellt. Gesteuert wird das Verhalten durch Mediaqueries.

Gesendet von meinem D5803 mit Tapatalk

Danke, ja so ähnlich mache ich das auch, zwar 2 Seitenlayouts, aber nur geringe Anpassungen an margin, paddings, Schriftgrössen und eben das menü. Für grosse Bildschirme wirken diese drei Striche zum Aufklappen meist etwas verloren. Das menü ist dann auch der Knackpunkt, ein Umbruch am handy ist unschön.

Habe erst vor 2 Monaten mit Contao angefangen, deswegen meine Fragen. Bei den zuvor mit Joomla oder auch mit Dreamweaver entworfenen Seiten kommen mit dem Tablett (chen) mit 7 Zoll display ja auch problemlos mit der Handyoptimierung, also sind zB in joomla die user agent einstellungen anders. Kann ich das in Contao beeinflussen? So in etwa wie bei herkömmlichen Webseiten, wo man mit einem php oder js im header gezielt die einzelnen Geräte ansprechen kann.
Ich find es supoptimal, wenn Contao das einfach so macht ohne mich zu fragen oder mir die Möglichkeit zu geben, zu bestimmen, etwa ein IPad mini oder ein nexus mit der Version mit der Handynavi gezielt anzusprechen, egal welcher browser dort gestartet wird, diese Geräte sind doch eindeutig mehr handy als Desktop Bildschirm, auch über die pixelauflösung geht das wohl nicht so gut.

Habe gerade gesehen, daß Thema war wohl schon mal, aber verlief dann eher im Sande...
https://community.contao.org/de/show...yout-Useragent

ich würde mich jetzt nicht als grossen php code Kenner bezeichnen, deswegen lasse ich meine Finger aus dem system, was ja auch beim nächsten update überschrieben würde.

Danke, nochmals
Thomas

Lass die Geschichte mit den zwei Layouts (im Sinne von Desktop & Mobile) einfach bleiben und benutze nur eins. Bei einem komplett responsivem Ansatz sollte dir der User-Agent total egal sein. Die Darstellung der Seite bestimmst du mit ja CSS, Mediaqueries helfen dir dabei für unterschiedlichen Größen den Inhalt anders darzustellen. Ob der Browser mit einer Breite von 600px nun auf einem Smartphone oder auf einem Desktop dargestellt wird, ist dabei vollkommen nebensächlich. Du hast 600px Platz für deinen Inhalt.

Nur so als Beispiel, der Seite http://www.raabe-lage.de/ ist es egal mit welchen Browser du daherkommt. Zieht du auf einem Desktop das Browserfenster kleiner, passt sich das Layout entsprechend an. Wenn du das unter https://www.google.de versuchst, wird das Input-Feld leider abgeschnitten :D

Problem ist das Menü, den Rest kann man mit mehr oder weniger umfangreichem CSS natürlich lösen, oder wird mit dem layout builder von Contao recht gut umgesetzt.

Ich nutze ab und zu js gesteuerte Menüs, wegen Barrierefreiheit ist reines CSS nicht immer von Vorteil. Schöne wäre ein Modulwechsel via CSS;), das geht doch nur über ein zweites Seitenlayout, oder gibt es da eine andere Lösung? (jetzt nicht unbedingt ein Contao Thema, ich weiß)

Trotzdem Danke für die Anregung!

Notfalls zwei Navigationen, die mit display:none; bzw display:block; aus- bzw eingeblendet werden per Media queries.

was vielen hier wohl klar ist, mir aber bis dato nicht, da ja der verführerische Eintrag "layout für mobile Seiten" etwas suggeriert, das eigentlich veraltet ist: nachdem ich mir die halbe Nacht um die Ohren geschlagen habe: mit "display" funktioniert auch zumindest das js mmenu im Wechsel mit dem desktop menu mit nur einem Seitenlayout, bei min / max width 680px wechselt die site sogar "on the fly" beim Drehen des tabletts.

für die Unbedarften wie ich hier der Weg dorthin.
1. beide menüs in das DT Seitenlayout einbinden, ebenso die beiden ursprünglich für zwei Seitenlayouts entworfenen Stylesheets.
2. jetzt einfach ein display: none für das menü ins jeweils andere stylsheet
3 löschen aller jetzt überflüssigen Einträge im mobile stylsheet

eigentlich ganz simpel, wenn man es weiß :D

Genau, das einzige etwas unschöne an der Geschichte ist halt, dass beide Navigationen im heruntergeladen werden müssen und im Quelltext erscheinen. Aber ich denke, die Vorteile überwiegen.

Zitat:

---

Zitat von Thomas55

Ich nutze ab und zu js gesteuerte Menüs, wegen Barrierefreiheit ist reines CSS nicht immer von Vorteil.

---

Reines css nicht von Vorteil wegen Barrierefreiheit? Da komm ich aber echt ins Grübeln.:eek:

Zitat:

---

Zitat von Thomas55

da ja der verführerische Eintrag "layout für mobile Seiten" etwas suggeriert, das eigentlich veraltet ist

---

Ich bin absoluter Verfechter responsiver Designs und habe auch noch nie die Notwendigkeit eines extra Layouts für mobile Seiten gesehen, würde diese Technik aber nicht zwingend als veraltet ansehen. Man muss halt wissen zu welchem Zweck man es einsetzen will. Zu mindestens hat man damit die Möglichkeit bestimmte Teile der Website auf den Geräten/in den Browsern gar nicht erst zu laden, die sich als mobile Geräte identifizieren.

Zitat:

---

Zitat von tab

das einzige etwas unschöne an der Geschichte ist halt, dass beide Navigationen im heruntergeladen werden müssen

---

Das ist zwar bei der Erweiterung mmenu so, aber man benötigt dazu nicht wirklich zwei Navigationen. Das geht auch mit einer. Ich finde zwei Navigationen so störend, dass ich das lieber von Hand code.

Zitat:

---

Reines css nicht von Vorteil wegen Barrierefreiheit? Da komm ich aber echt ins Grübeln.

---

:D ok, kleiner blackout zu später Stunde....

Danke
und gruss
Thomas

Hallo liebe Profigemeinde.

Also ich musste leider meinen Server neu aufsetzen und habe mich natürlich wieder für Contao entschieden. Die Seite habe ich halbwegs wieder hergestellt. Obwohl ich mir jedoch endliche Forenbeiträge durchgelesen habe und auch tagelang mich daran versucht habe, bekomme ich es einfach nicht hin das die Internetseite sich auf mobilden Endgeräten automatisch verkleinert.

Das hatte zuvor problemlos immer funktioniert. Da mir nun jedoch die Ideen ausgegangen sind, wollte ich fragen ob noch jemand einen Tipp hat.

Beispielseite: Link

Ich bedanke mich schonmal für Eure Tipps.