Mobile Webseiten -> extra CSS für Smartphones und iPads

**rockmo10** · 13.02.2012, 12:32

Hallo zusammen,

vielleicht weiß jemand ne Lösung:

Ich hab 2 extra CSS für die Smartphoneansicht erstellt:

1 CSS mit folgendem Media Query Eintrag : (min-width : 400px) and (max-width : 600px) and (orientation : landscape)
1 CSS mit folgendem Media Query Eintrag : (min-width: 320px), (orientation : portrait)

So funzt auf Smartphones wunderbar.

ABER:

Jetzt will ich noch 2 extra CSS Dateien fürs iPad anlegen mit folgendem Eintrag erstmal nur die die Landscape-Ansicht:

1 CSS mit folgendem Media Query Eintrag : (min-width : 1024px), (orientation : landscape)

und jetzt der HAKEN:

die Smartphoneansicht übernimmt jetzt die CSS Datei für das iPad.
Und ich versteh nicht wirklich warum, denn ich sage der Smartphoneansicht im Landscapemodus doch: DU sollst nur gelten bis einer maximalen Breite von 600px

Weißt jemand wo der Fehler liegt?

DANKE !!

**rockmo10** · 13.02.2012, 13:03

was ich gerade überlege.... kann es vielleicht sein, dass der nur 1 landscape modus und 1 portrait modus css annimmt?

**MacKP** · 13.02.2012, 13:04

Hallo rockmo10,
vllt passt etwas an der Reihenfolge nicht?
Wenn die ipad Regel zum Schluss eingebunden wird, dann wird das ja wieder überschrieben?

Viele Grüße

**rockmo10** · 13.02.2012, 13:24

Hallo MacKP,

ne daran liegts nicht.
Habe beides mal von der Position verschoben.

Ich weiß es nicht 100 % aber ich denke es liegt wirklich daran, dass der nur einmal 1 CSS Datei mit einer Oriantation nehmen kann...

dann muss ich doch wohl wieder mit %-Angaben proggen

**MacKP** · 13.02.2012, 13:55

Dann mach die Abfrage der genauen größe doch in der CSS-Datei selber?
Hier ist aufgezeigt wie das gehen kann: http://www.highresolution.info/spotl...ive_webdesign/
Vllt hilft das?

Viele Grüße

**rockmo10** · 13.02.2012, 14:22

jappy ...

habs jetzt auch so mit %-Angaben gemacht
i dont like this aber was soll man machen ...

danke dir für deine hilfe

**andreasisaak** · 13.02.2012, 14:31

Nein in der CSS kannst du definitiv mehrere Modi verwenden. Ich hab in einer CSS über 20 Media Queries und wechsle dort 4mal zwischen Landscape und Portrait Modus. Du musst noch irgendwo anders einen Fehler haben, wahrscheinlich in der Reihenfolge.

**andreasisaak** · 13.02.2012, 14:34

Ein kleiner Auszug:

Code:

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

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

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

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

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

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

**rockmo10** · 13.02.2012, 14:37

ok hast du ein beispiel von der css mit der media query einbindung und der reihenfolge der css dateien im seitenlayout ?

ich wollte 4 css dateien anlegen

2 (landscape und portrait) für smartphones bis width:480px
2 (landscape und portrait) für ipad ab width:480px bis 1024px

ich benutze contao 2.10.4

danke schonmal für die hilfe

**andreasisaak** · 13.02.2012, 14:38

Das Beispiel siehst du einen Beitrag weiter oben. Achte dringend auf die Reihenfolge, die ist wichtig. Und übrigens brauchst du keine 2-4 CSS Dateien dafür. Kannst alles in einer lagern.

**rockmo10** · 13.02.2012, 14:40

ok .. das kenne ich auch aber...

in contao 2.10 hast du ja unter der css datei eine extra zeile für die media query sachen ..
da hatte ich die breite und die orientation reingehauen ..

**rockmo10** · 13.02.2012, 14:43

ok aber wenn ich diesen code wie du in geschrieben hast verwende...
hast du dann auch alles in %-Angaben geproggt?

**andreasisaak** · 13.02.2012, 15:26

Nö wieso sollte ich das? Beim iPhone und iPad hast du doch konkrete Pixelwerte die bei keinem Gerät der Firma Apple anders sind.

***lucina*** · 13.02.2012, 15:30

Zitat von rockmo10

ok aber wenn ich diesen code wie du in geschrieben hast verwende...
hast du dann auch alles in %-Angaben geproggt?

Das müssen jetzt keine Prozente sein, aber flexible Grids sind schon extremst nützlich an dieser Stelle, wenn man nicht für jedes Gerät ein oder mehrere eigene CSS erstellen möchte. Bei Apple-Geräten ist das vergleichsweise einfach, aber wenn ich da an die diversen Auflösungen anderer Systeme denke ...

**rockmo10** · 13.02.2012, 15:47

ok ... sorry bin noch ein newbie

dann versteh ich aber was nicht ...

wenn ich also den oben genannten code benutze
und wie ihr sagt, muss man eigentlich nur 1 css benutzen ..

wie sage ich denn dann:

ok wenn du im portraitmodus bist, soll dieses element eine breite von 200px haben
und wenn du im landscapemodus bist sollst du eine breite von 500px haben ...

**psren** · 13.02.2012, 15:55

Du kannst mehrere Media-Queries in eine CSS-Datei schreiben :-D
Das ist kein Problem. Wie das mit dem Contao-Stylesheets-System geht kann ich dir aber nicht sagen, weil ich das nicht benutze.

**rockmo10** · 13.02.2012, 16:05

ahhhhhhhhhhhhhhh jetzt verstehe ich ...

habe die geschweiften klammern nicht gesehen in dem beispielcode

einfach dahinter reinschreiben..

ich probiers mal morgen aus und berichte dann

dankeeeeee

***Nina*** · 13.02.2012, 17:54

Es hängt auch einfach davon ab, wie du deine Stylesheets machst. Wenn du sie über den Stylesheet-Generator machst, dann brauchst du pro Gerätedefinition ein Stylesheet.

Wenn du hingegen z.B. dein Stylesheet in tl_files/css/ ablegst und manuell in das Seitenlayout einbindest, kannst du in dem Stylesheet beliebig viele Anweisungen reinschreiben (wie im Beispiel weiter oben).

Hängt also alles von deiner Arbeitsweise ab. Das Endergebnis sollte dann aber so oder so identisch sein. Wenn nicht, hast du dich wo verschrieben oder der Generator hat einen Bug

@andreasisaak: Hast du Lust mal die ganze Latte deiner Queries zu posten? Vielleicht können wir uns ja gemeinsam austauschen, eventuell verbessern und dann eine schöne Übersicht ins Wiki packen. Muss ja nicht jeder alles neu erfinden

**rednex** · 13.02.2012, 17:58

Mal ne evtl. doofe Frage...
bisher sehen alle Seiten die ich mit Contao umgesetzt habe auch auf Smartphones/Tablets brauchbar aus... wieso also extra CSS-Anweisungen etc.?

***Nina*** · 13.02.2012, 18:09

Naja, es ist schon ein Unterschied ob ich mir z. B. ein großes Newsmagazin auf 1140 Pixel oder auf 128 Pixel ansehe.

Die Mobilgeräte haben alle passable Vergrößerungsfunktionen, aber wenn ich z. B. eine Nachricht lese und ständig hin und herschieben muss um alles darauf zu sehen, ist das auf Dauer als Nutzer unbefriedigend.

Wenn nun der Webdesigner mitgedacht und die Site "responsive" oder sonst irgendwie für Mobilgeräte gebaut hat, zeigt mir mein Mobilgerät den ganzen Inhalt der Nachricht am Stück direkt im Display in der Standardgröße meines Mobilgeräts an - ohne nerviges anpassen.

Selbst kleine Anpassungen erhöhen oft schon das positive Nutzungserlebnis. Um ein Beispiel zu nehmen: Ich lese gerne Zeit.de und Spiegel.de - bei Zeit.de wird mein iPad gut erkannt und die Newsbeiträge werden optimal auf der verfügbaren Größe dargestellt. Bei Spiegel hingegen muss ich öfter nervig horizontal scrollen/vergrößeren oder es lädt den Artikel erst gar nicht richtig ein (weshalb auch immer, hatte bisher keine Lust zu schauen woran es hakt). Da ist die Nutzung von Zeit.de einfach komfortabler - auch wenn ich als Nutzer schlussendlich bei richtigem Interesse eine so hohe Toleranzschwelle habe, dass ich die News trotz schlechtem Nutzungsergebnis auch zusätzlich bei Spiegel.de lese.

**andreasisaak** · 13.02.2012, 19:06

Zitat von Nina

@andreasisaak: Hast du Lust mal die ganze Latte deiner Queries zu posten? Vielleicht können wir uns ja gemeinsam austauschen, eventuell verbessern und dann eine schöne Übersicht ins Wiki packen. Muss ja nicht jeder alles neu erfinden

Natürlich. Einfach einen neuen Thread in diesem Subforum eröffnen? Dann kann ich auch gleich ein paar Links zu MediaQueries Auflistungen posten, ich hab mir ja auch nicht alle selber ausgedacht

***lucina*** · 13.02.2012, 19:10

Gerne auch hier ergänzen: http://de.contaowiki.org/CSS#.40medi...ntao-Framework

**rockmo10** · 19.02.2012, 18:43

Zitat von andreasisaak

Ein kleiner Auszug:

Code:

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

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

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

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

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

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

also ich hab eben versucht das SO WIE ES IST als CSS einzubinden und selektoren einzufügen .. so
speicher das ab und sehe er zerhackt die ganzen selektoren ... außer die erste zuweisung vom ipad

also irgendwie geht das nicht so oder ich mache wieder was falsch
ich werde jetzt versuchen die einzelnen zuweisungen (ipad, iphone etc) in einzelne css dateien zu packen weil anders weiß ich auch nicht wie es gehen soll
ich bräuchte mal ein beispiel wie man das richtig einbindet...

**andreasisaak** · 19.02.2012, 19:07

Ich verstehe nur Bahnhof. Wie sollen einfache MediaQueries ohne Elementzuweisungen deine Seite zerhacken?

Ich kann dir auf jeden Fall empfehlen noch einmal ein Buch über CSS in die Hand zu nehmen

**psren** · 19.02.2012, 19:45

Zitat von rockmo10

also ich hab eben versucht das SO WIE ES IST als CSS einzubinden und selektoren einzufügen .. so
speicher das ab und sehe er zerhackt die ganzen selektoren ... außer die erste zuweisung vom ipad

Versuchst du das gerade in Contao zu Importieren oder bindest du es einfach so ein?

Ich empfehle die dazu die Erweiterung "Theme+" von tril.

Wenn du das importierst in den Stylesheet-Editor geht das schief!

**rockmo10** · 20.02.2012, 07:52

Zitat von andreasisaak

Ich verstehe nur Bahnhof. Wie sollen einfache MediaQueries ohne Elementzuweisungen deine Seite zerhacken?

Ich kann dir auf jeden Fall empfehlen noch einmal ein Buch über CSS in die Hand zu nehmen

hä???
keine sorge ich kenne mich schon mit css bestens aus nur noch nicht so mit der media query geschichte aber ich frage dann lieber doch andere leute die bisschen mehr verständnis dafür haben das nicht alle gleich auf anhiebt perfekt alles umsetzen können ^^

**rockmo10** · 20.02.2012, 07:52

Zitat von psren

Versuchst du das gerade in Contao zu Importieren oder bindest du es einfach so ein?

Ich empfehle die dazu die Erweiterung "Theme+" von tril.

Wenn du das importierst in den Stylesheet-Editor geht das schief!

super danke dir

das brauchte ich

**andreasisaak** · 20.02.2012, 07:54

Wollen wir nicht polemisch werden

Es ist nur CSS.

**rockmo10** · 20.02.2012, 08:04

Zitat von andreasisaak

Wollen wir nicht polemisch werden

Es ist nur CSS.

du, ich bin auch nicht auf sowas hier aus
ich habe lediglich um hilfe mit der einbindung gebeten, weil ich in der beziehung noch unerfahren bin

**nicci79** · 22.02.2012, 12:21

Hallo Leute,

ich bin zwar nicht neu bei Contao aber absoluter "Frischling" was die Community angeht.

Es geht mir im Prinzip um das gleiche Problem wie es rockmo10 geschildert hatte:

Wenn ich die Media Query Angaben in die css eingebe (im Backend via CSS-Editor-Extension) und die Datei speichere (speichern + schließen) dann zerhaut es diese Angaben komplett.
Das heißt aus z.B. das

Code:

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

/* iPad portrait */ 
@media only screen and (max-device-width: 768px) and (orientation:portrait) {body{background:fff;} }

wird dann das:

Code:

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

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

body{background:fff;
{
    };
}

Bei der Auskommentierung fehlen "*/" und mit den geschweiften Klammern scheint contao da auch irgendwie nicht zurecht zu kommen.

Was mache ich noch falsch?

Wäre cool wenn mir jmd. helfen könnte.

Danke.

***lucina*** · 22.02.2012, 12:39

Du solltest die MediaQueries in die Settings des jeweiligen CSS-Sheets eintragen.

In der Extension CSS-Editor bearbeitest Du nur die Styles, nicht die Queries.

Carolina.
css.png
EDIT: Habs mal ins Wiki getragen

**nicci79** · 22.02.2012, 12:58

Hallo Lucina,

das ging ja schnell.

Ist es denn zwingend notwendig für jede Media Query Angabe ein separates Stylesheet anzulegen?

Und angenommen man würde es machen wie du vorschlägst, schreibt man die css-Angaben dann wie gwohnt in die "Media Query" Stylesheets ohne weitere Angaben?

LG

Nicci

***lucina*** · 22.02.2012, 13:04

1. Ja.

2. Bitte schau in den Wiki-Artikel.

Carolina.

**nicci79** · 22.02.2012, 13:47

Ok, Danke, ich versuch's dann mal so.

Nachtrag:

Also irgendwie bin ich wohl zu doof dafür.
Habs laut Wiki gemacht, die neue css im Seitenlayout eingebunden und die css-Angabe ganz normal in das Stylesheet für die Media Queries reingschrieben. Aber es tut sich nix ... ;o(

Könnte es noch an Schreibrechten liegen?

LG

Nicci

**nicci79** · 23.02.2012, 12:01

Kann jmd. evtl. mal einen Link posten von einer Contao Website mit funktionierenden Media Queries?
Danke.

Nicci

**nicci79** · 24.02.2012, 10:30

Tolle Community,

wenn man es nicht gleich kapiert dann bekommt man auch keine Hilfe mehr?!

Kann nicht jeder ein Vollprofi sein.

Gruß

Nicci

***hofff*** · 24.02.2012, 10:33

Hallo,

ruhig bleiben und tief Luft holen. ;-)

Benutzt du Theme+? Welche Contao Version hast du?

fg
nicky

von meinem iPad mit Tapatalk gesendet.

**nicci79** · 27.02.2012, 07:48

Moin nicky,

ich hab momentan Version 2.10.4, Theme+ ab ich zwar installiert aber noch nicht wirklich angewendet.
Bin noch nicht ganz durchgestiegen wie ich damit die Media Queries zum Laufen bringen ;o(

Vielen lieben Dank das du dich noch gemeldest hast

LG
Nicci

***hofff*** · 27.02.2012, 09:49

Hallo,

also ... du legst Dir erstmal eine gesonderte Stylesheet-Datei an, die nur für das iPhone gültige Anweisungen enthält. Diese lädst du dann in Deinen tl_files Ordner und gehst im Cto Backend unter Themes ... dort dann auf der rechten Seite auf das 5. Icon von links, weitere Dateien in Theme XY einbinden. Dort legst du eine neue Datei an, Dateityp: CSS Datei, hochgeladene CSS-Datei für iPhone auswählen und bei Medientypen, wie unten von mir geschrieben, trägst du only screen and (max-device-width: 480px) ein ... speichern und dann sollte es funktionieren. Es sei denn, du nutzt den internen CSS-Editor, dann musst du das natürlich im internen Editor machen und nicht bei Theme+.

Noch als Tip: "media queries iphone" bei google eingegeben liefert auch eine Menge an Infos.

Bei diesem hier http://kulturbanause.de/2011/04/webs...co-optimieren/ ist mal allgemein beschrieben, was media queries können und hier http://www.drweb.de/magazin/media-qu...ss3-erstellen/ ist dann beschrieben, was du z.B. für das iPhone als Medientypen angeben musst.

Ich hoffe, das hilft Dir weiter?!

fg
nicky