Seltsamer Effekt CSS mobile

[KlausMangold]

Hallo,

jetzt hab ich ein kurioses Problem: Wenn ich auf dem Desktoprechner die Seite anschaue und das Fenster kleiner schiebe, springt die Navigation oben brav um. Auf dem Handy macht es das aber nicht!

Fotobücher, Galerieseiten und Tutorials von Infrarot bis Photoshop

Was ist falsch an folgendem simplen Code für die mobile-Version:

.menu_text {
display: block;
}

.menu_bild {
display: none;
}

 

[terra75]

Versuche mal alles in einer CSS zu Packen.
Erleichtert meist einiges und vermindert doppelte eingaben, die sich untereinander stören könnten.

Das Beispiel unten zeigt die gängigsten Größen. Muss man aber nicht unbedingt befolgen. Meist reicht die Auflösung anzupassen für Monitore, Pads und Handy.

Beispiel:

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

 
/* @ iPhone (landscape)
-----------------------------------------------------------------*/
@media only screen and (min-width : 321px) {}


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


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


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


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


/* @ Desktops and laptops
-----------------------------------------------------------------*/
@media only screen and (min-width : 1224px) {}


/* @ Large screens
-----------------------------------------------------------------*/
@media only screen and (min-width : 1824px) {}


/* @ Orientation Portrait
-----------------------------------------------------------------*/
@media screen and (orientation: portrait) {}


/* @ Orientation Landscape
-----------------------------------------------------------------*/
@media screen and (orientation: landscape) {} 
   

/* @ iPhone 4 and high pixel ratio device
-----------------------------------------------------------------*/  
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {}

2. Tip: keine Tabellen im Quellcode verwenden. Schau mal nach Flex. Ist viel dynamischer und erleichtert auch das Arbeiten mit responsive Layouts.
Evtl. auch mal nach CSS Tabellen schauen, wenn es unbedingt nötig ist. ( display: table; )




Gruß Terra

 

[KlausMangold]

Genau diesen ganzen Ballast will ich ja vermeiden, indem die CSS-datei für das Handy wirklich nur die Anweisungen enthält, die ich dort verwenden will. Und mehr als 2 Versionen brauche ich eh nicht. Momentan geht es mir nur darum, dass ich auf dem Desktoprechner das Menü etwas anders gestalten will als auf dem Handy aus Platzgründen. Das Problem ist nur, dass das handy display: none ignoriert und beide Menüs anzeigt!

 

[terra75]

Versuche es dann doch mal mit:

visibility: hidden;

Gruß,
Terra

 

[mikdoe]

Kennst du den konkreten Unterschied, Terra?

 

[terra75]

Hier mal eine Beschreibung dazu:

CSS visibility ? Verstecken und zeigen

Kurz gesagt: visibility versteckt zwar das Objekt aber die Größe des Ursprünglichen Objektes bleibt bestehen. Display: none; versteckt zwar auch das Objekt, gibt aber die Höhe und Breite des zu versteckende Objekt frei.

Hast du mal im Entwicklungsmanager vom Browser geschaut ob dein Display:none; auch wirklich ausgeführt wird. Probiere es ggf. nochmal mit einem anderen Handy. Es gibt viele Sachen, die ein Computer Browser ignoriert, bzw. überspringt ohne ein Fehler auszugeben.

Teste mal auch gleiche Browser auf Handy und PC. (z.B. Google Chrome).

PS: Bei mir wird deine Seite im Handy wie im Browser am PC angezeigt. (klein und groß)

Gruß,
Terra

 

[mikdoe]

Ach, ich hab mich auch vertan. Ich wollte eigentlich Klaus gefragt haben.

 

[TecEye]

display:none wird nicht vom mobilen browser, zumindest ist mir ein derartiger browser noch nicht untergekommen, es ist einfach so dass dein befehl nicht feuert!

 

[kkapsner]

Auf dem Handy macht es das aber nicht!

Vielleicht solltest du sagen, mit welchem Handy du testest.