Mobile Webseiten -> extra CSS für Smartphones und iPads
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 !!
Probleme mit Media Query Einbindung
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.
Liste der Anhänge anzeigen (Anzahl: 1)
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.
Anhang 6715
EDIT: Habs mal ins Wiki getragen
