Hallo
Ich beziehe für die mobile Ansicht meiner Website zwei Css-Dateien:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="mobile.css" media="only screen and (max-width: 730px)">
<link rel="stylesheet" href="mobile-lscape.css" media="only screen and (max-width: 730px) and (orientation: landscape)">
<link rel="stylesheet" href="screen.css" media="screen and (min-width: 730px)">
Dies funktioniert soweit sehr gut.
Nur habe ich das Problem, dass das Landscape CSS erst von den Browsern (alle) berücksichtigt wird, wenn ich die Seite neu lade. Mache ich dies nicht, stellt mir der Browser die Inhalte so dar, wie im mobile.css definiert.
mobile-lscape.css beinhaltet einige Css Definitionen, welche die Klassen- oder Tag-Definitionen aus mobile.css überschreiben.
Was mache ich falsch, dass ich jedesmal die Seite neu laden muss, damit es richtig dargestellt wird?
Komisch dabei ist:
Nicht alle Klassen oder Tags sind betroffen. So wird das Layout korrekt dargestellt. Jedoch werden die Inhalte (innhalb <p>-Element und mittels p Definition im CSS) nicht richtig dargestellt, d.h. die Schriftgrösse wird erst beim Refresh der Seite dann richtig dargestellt. Ebenso alle Überschriften. Komisch ist auch, dass das Problem nur bei Porttrait-Ansicht zu Landscape besteht. Drehe ich mein Handy wieder von Landscape zur Portrait Ansicht, ist alles Korrekt. Wenn ich dann wieder auf Landscape umdrehe, habe ich wieder die selben Effekte ???
Vielen Dank für Tipps, an was dies liegen könnte.
Gruss, Paul