Anzeigegröße auf Smartphone beim Webseitenaufruf

[ltd-stern]

Hallo,
ich erstelle gerade ein mobiles Layout für eine bestehende Webseite. Die Seite hat ein Layout für die Startseite und ein Layout für alle anderen Seiten. Ich habe jetzt ein mobiles Layout für die Startseite erstellt und folgendes gemacht:
- eine mobil.css erstellt, mit Mediaquery @media screen and (max-width:767px), das
- ein Seitenlayout MOBIL angelegt (mit Einbindung der mobil.css)
- in der Seitenstruktur der Startseite unter "Layout für mobile Seiten" das Seitenlayout MOBIL zugewiesen
Klappt alles super. Das einzige Problem ist, wenn ich die Seite vom Smartphone aufrufe, wird sie anfangs zu groß angezeigt.
Ich habe jetzt versucht, den Viewport in der fe_page auszukommentieren. Dann wird aber wieder das nicht-mobile Layout angezeigt. (Warum?)
Dann habe ich einen Meta-Tag hinzugefügt mit width=device-width oder auch width=768. Klappt aber auch nicht. Auch mit initial-scale funktioniert es nicht.
Kann mir jemand helfen, wo liegt der Denkfehler?
LG
Andrea

[dackelchen]

... wenn ich die Seite vom Smartphone aufrufe, wird sie anfangs zu groß angezeigt.

Hallo Andrea,

was eminst Du damit? Hast Du einen Link zur Seite, damit man sich das Problem mal ansehen kann-

Wie testest Du? Am PC mit Hilfsmitteln oder online?

[rselma]

Könnte es an dem initial scale liegen ?

<meta name="viewport" content="width=320, initial-scale=1" />

[Andreas]

Wenn du in dem Mobile-Layout nur ein anderes CSS aufsetzen willst, kannst du auf ein extra Mobile-Layout verzichten, dann setze deine CSS-Datei mit dem Media-Query einfach als letztes in deine normalen Layouts.

[tab]

Was verstehst du unter "zu gross angezeigt"?

[ltd-stern]

Also, danke schon mal für die Antworten.
Es handelt sich um die Seite gelöscht (momentan nur die Startseite).
Ich benötige ein mobiles Layout (und nicht nur die CSS mit mediaquery), da ich darüber ein anderes Header-Bild einbinde und außerdem ein Ausklappmenu (dk_mmenu) statt des normalen /feststehenden Menüs bei der Desktop-Variante.
Ich teste die Seite direkt vom Smartphone. Beim Aufruf der Seite soll die (mobile) Seite mit kompletter Breite zu sehen sein. Momentan ist die Ansicht aber vergrößert und ich muss erst zusammenschieben, um das gewünschte Layout zu sehen.
Ich habe schon versucht über den Viewport mit den Parametern width und initial-scale zu gehen, es brachte aber nicht das gewünschte Ergebnis.

Gruß
Andrea

[pumukel]

Hallo Andrea

Welche Contao Version benutzt Du. Ich setzte (ab Contao 3.3.x bei mobilen Layout im Seitentemplate unter Viewport width=device-width; initial-scale=1.0; maximum-scale=1.0;. siehe http://www.jerrysbar.ch
Ich benutze allerdings das YAML CSS Framework 4.1.2 (ist einfach immer noch genial). Deine Startseite sieht auf meinen Galaxy S5 im Portraitformat viel zu klein aus. Und Dein Design scheint für responives Layout noch nicht richtig gestylt oder geeignet zu sein.

Gruss pumukel

[Spooky]

Also, danke schon mal für die Antworten.
Es handelt sich um die Seite www.blumen-bade.de (momentan nur die Startseite).
Ich benötige ein mobiles Layout (und nicht nur die CSS mit mediaquery), da ich darüber ein anderes Header-Bild einbinde und außerdem ein Ausklappmenu (dk_mmenu) statt des normalen /feststehenden Menüs bei der Desktop-Variante.
Ich teste die Seite direkt vom Smartphone. Beim Aufruf der Seite soll die (mobile) Seite mit kompletter Breite zu sehen sein. Momentan ist die Ansicht aber vergrößert und ich muss erst zusammenschieben, um das gewünschte Layout zu sehen.
Ich habe schon versucht über den Viewport mit den Parametern width und initial-scale zu gehen, es brachte aber nicht das gewünschte Ergebnis.

Gruß
Andrea

Dir fehlt einfach

<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 

im source. Füge den Viewport nochmal hinzu, damit wir verstehen können was das "nicht gewünschte Ergebnis" sein könnte.

[ltd-stern]

Dir fehlt einfach

<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 

im source. Füge den Viewport nochmal hinzu, damit wir verstehen können was das "nicht gewünschte Ergebnis" sein könnte.

Naja, das nicht gewünschte Ergebnis ist, dass das Ergebnis genauso bleibt wie vorher....
Hab es jetzt nochmals eingefügt. Noch ne Idee?

[Spooky]

Hab es jetzt nochmals eingefügt.

Online ist die Änderung nicht zu sehen, da fehlt der Viewport tag immer noch.

// achso, verwendest du immer noch das separate Mobile Seitenlayout? (welches du ja eigentlich gar nicht benötigst)

[ltd-stern]

Online ist die Änderung nicht zu sehen, da fehlt der Viewport tag immer noch.

// achso, verwendest du immer noch das separate Mobile Seitenlayout? (welches du ja eigentlich gar nicht benötigst)

äh,jetzt bin ich aber verwirrt....
Erst nochmal ganz kurz vorab: ich benutze das mobile Layout, da ich darüber ein anderes Headerbild einbinde und ein Ausklappmenü (das hatte ich ja schon mal geschrieben) im Gegensatz zum Standardlayout. Über ein 2. Layout kann ich das ja komfortabel machen. Ist das denn grundsätzlich falsch? Wozu gibt es denn diese Möglichkeit sonst?

In diesem mobilen Layout habe ich als zusätzliche Head-Zeile eingefügt
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Ist das nicht korrekt?

[pumukel]

Hallo Andrea

Wieso benutzt Du in den Media Breakpoints z.B. @media screen and (max-device-width:768px) anstatt @media screen and (max-width:768px) also ohne das device ? Ändere einmal all diese auf nur max-width oder min-width ohne dieses device. Dann sieht es schon einmal ganz anders aus. Und gib Deinem #logo noch ein max-width:100% und ein max-height:100%;

Gruss pumukel

[Andreas]

Du solltest im Mobile-Layout besser die festen Breiten rausnehmen, z.B. für den #wrapper und das #logo.

äh,jetzt bin ich aber verwirrt....
Erst nochmal ganz kurz vorab: ich benutze das mobile Layout, da ich darüber ein anderes Headerbild einbinde und ein Ausklappmenü (das hatte ich ja schon mal geschrieben) im Gegensatz zum Standardlayout. Über ein 2. Layout kann ich das ja komfortabel machen. Ist das denn grundsätzlich falsch? Wozu gibt es denn diese Möglichkeit sonst?...

Nein, das ist nicht grundsätzlich falsch. Der Unterschied ist, dass das Mobile-Layout nur greift, wenn Contao den User-Agent als Mobile erkennt. Du siehst dann die Klasse "mobile" im BODY. Mit diesem FF-Addon kannst du UAs im FF simmulieren https://addons.mozilla.org/de/firefo...itcher/?src=ss.

Die Media-Queries im normalen Layout sind unabhängig vom Ausgabegerät (außer du hast das screen noch mit drin).
@media (max-width:768px)

Hinzu kommt, dass du mit dem Mobile-Layout andere FE-Module ausgeben kannst als mit dem normalen Layout.

ps
Eine Manipulation deines Logos, könntest du auch über einen Media-Query erreischen, also anderes CSS.
Eine mobile Navigation ist im Markup ja auch eine Liste, es könnte hier also auch das selbe Navigationsmodul genommen und mit CSS angepasst werden.

[pumukel]

Du solltest im Mobile-Layout besser die festen Breiten rausnehmen, z.B. für den #wrapper und das #logo.

ps
Eine Manipulation deines Logos, könntest du auch über einen Media-Query erreischen, also anderes CSS.
Eine mobile Navigation ist im Markup ja auch eine Liste, es könnte hier also auch das selbe Navigationsmodul genommen und mit CSS angepasst werden.

Hallo Andreas

So wie Andrea vorgeht kann es einfach nicht funktionieren. Z.B Die Grafik im Header: logo-blumen-bade.png, kann sie nicht verwenden. Es zerstört ganz einfach Ihr Layout. Sie musst die sog. Faux-Columns Technik für Spaltenfarben ohne Grafik verwenden.

Ich habe mich nun mit dem Problem von Andrea beschäftigt siehe http://www.gkammermann.ch/contao_337...umen-bade.html

Das responsive Layout habe ich noch nicht optimiert, aber es sieht doch schon einges besser aus.

Ich persönlich arbeite immer noch lieber mit YAML 4.1.2

PS. Jetzt habe ich allerdings Probleme mit dem dk_mmenu. Menu Background ist nicht sichtbar. z-index ändern, aber wo ?

Andrea habe ich eine PM gesendet
Gruss aus Basel
pumukel

[ltd-stern]

Ok ihr Lieben, Danke für die Hilfe, habe allerdings aus Wirtschaftlichkeits-Gründen kapituliert und mich wieder an
http://pmueller.de/blog/contao-3-web...responsiv.html
gehalten!
Da ich die Seite noch nicht einmal selbst erstellt habe, und da noch ein ganzer Wust von weiteren Seiten dranhängen wird, und ich nicht Vollzeit in das Projekt investieren kann, muss ich an dieser Stelle sagen:
Danke für den Fisch
Gruß
Andrea