Contao-Camp 2024
Ergebnis 1 bis 14 von 14

Thema: media query grundeinstellung

  1. #1
    Contao-Nutzer Avatar von Thomas55
    Registriert seit
    19.12.2016.
    Ort
    Bad Berleburg
    Beiträge
    90

    Standard 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

  2. #2
    Wandelndes Contao-Lexikon Avatar von tab
    Registriert seit
    22.10.2013.
    Beiträge
    10.060
    Contao-Projekt unterstützen

    Support Contao

    Standard

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

  3. #3
    Contao-Nutzer Avatar von Thomas55
    Registriert seit
    19.12.2016.
    Ort
    Bad Berleburg
    Beiträge
    90

    Standard

    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),
    );
    Geändert von Thomas55 (17.02.2017 um 20:04 Uhr)

  4. #4
    Wandelndes Contao-Lexikon Avatar von tab
    Registriert seit
    22.10.2013.
    Beiträge
    10.060
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.

  5. #5
    Contao-Fan Avatar von Thraile
    Registriert seit
    17.12.2009.
    Ort
    Detmold
    Beiträge
    501
    Partner-ID
    6306

    Standard

    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

  6. #6
    Contao-Nutzer Avatar von Thomas55
    Registriert seit
    19.12.2016.
    Ort
    Bad Berleburg
    Beiträge
    90

    Standard

    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
    Geändert von Thomas55 (18.02.2017 um 23:49 Uhr)

  7. #7
    Contao-Fan Avatar von Thraile
    Registriert seit
    17.12.2009.
    Ort
    Detmold
    Beiträge
    501
    Partner-ID
    6306

    Standard

    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

  8. #8
    Contao-Nutzer Avatar von Thomas55
    Registriert seit
    19.12.2016.
    Ort
    Bad Berleburg
    Beiträge
    90

    Standard

    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!

  9. #9
    Wandelndes Contao-Lexikon Avatar von tab
    Registriert seit
    22.10.2013.
    Beiträge
    10.060
    Contao-Projekt unterstützen

    Support Contao

    Standard

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

  10. #10
    Contao-Nutzer Avatar von Thomas55
    Registriert seit
    19.12.2016.
    Ort
    Bad Berleburg
    Beiträge
    90

    Standard

    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ß

  11. #11
    Wandelndes Contao-Lexikon Avatar von tab
    Registriert seit
    22.10.2013.
    Beiträge
    10.060
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.

  12. #12
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Thomas55 Beitrag anzeigen
    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.

    Zitat Zitat von Thomas55 Beitrag anzeigen
    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 Beitrag anzeigen
    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.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  13. #13
    Contao-Nutzer Avatar von Thomas55
    Registriert seit
    19.12.2016.
    Ort
    Bad Berleburg
    Beiträge
    90

    Standard

    Reines css nicht von Vorteil wegen Barrierefreiheit? Da komm ich aber echt ins Grübeln.
    ok, kleiner blackout zu später Stunde....

    Danke
    und gruss
    Thomas

  14. #14
    Contao-Nutzer
    Registriert seit
    31.03.2011.
    Beiträge
    85

    Standard Auflösung für mobile Endgeräte funktioniert nicht.

    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.
    Geändert von GordonK (13.03.2017 um 15:38 Uhr)

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •