Mobule und Landscape: Css wird nicht "geladen"

[PaulCSS]

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

[Gunnar Bittersmann]

@@PaulCSS:

nuqneH

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

  
Dem Nutzer das Hineinzoomen zu verbieten, damit er besser lesen kann, ist in den allermeisten Fällen eine sehr schlechte Idee. Weg mit `user-scalable=no"`.  
  
  

> ~~~css

<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)">  
> 

Drei Stylesheets einzubinden (d.h. 3 HTTP-Requests) ist auch keine gute Idee. Verwende ein Stylesheet, indem sämtlicher Code (d.h. auch alle Media-Quries) steht.

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.

Alle Browser heißt welche? Welches Gerät? Welches Betriebssystem (Version)?

Link zur fraglichen Seite?

Qapla'

[PaulCSS]

Hallo Gunnar

Vielen Dank für deine Tipps. Werde ich machen.

Es betrifft nur den Chrome auf iOS / iPhone. Ob der Effekt auch bei Android Geräten bei Chrome vorkommt, muss ich noch gucken wenn ich ein Android ausleihen kann (von Freunden).

Die Seite ist noch nicht live, darum kann ich dir leider keine URL geben.

Evt. hast du eine Idee. Bin fast am verzweifeln....

Vielen Dank!
Paul

[PaulCSS]

Hi

Ich habs gefunden:

  
 html {  
        -webkit-text-size-adjust: none;  
        text-size-adjust: none;  
    }  

Dies bewirkt, dass der text-size-adjust deaktiviert ist und der Text beim Landscape nicht automatisch angepasst wird:

"Notice, however, that the text size is still magnified independently of the page. To prevent the text size from changing, disable the text-size-adjust CSS property. This fixes the entire page: "

Siehe, inkl. Bsp: http://docs.webplatform.org/wiki/tutorials/mobile_viewport

Grüsse
Paul