Media query funktioniert nicht wie beabsichtigt

[Paludis]

Hallo, ich habe eine Media query in meinem css für das iPhone 4 (320x480px). Wenn ich in der query jedoch werte verändere, sieht man dennoch keinen unterschied. Es wird nicht angewendet. Was habe ich falsch gemacht?

/* ----------- iPhone 4 and 4S ----------- */
/* Portrait */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (orientation: portrait) {

      .body {
        width: 80%;
        font-size: 90%;
    }

      .mainHeader img.Margrit {
        right: 10%;
        top: 50%;
    }

      .mainHeader img.Logo {
        right: 10%;
        top: 60%;
    }

      .mainHeader img.Couture {
        top: 27.5%;
        left: -15%;
    }

      .mainHeader nav {
        height: 160px;
    }

      .mainHeader nav ul {
        padding-left: 0;
    }

      .mainHeader nav ul li {
        width: 100%;
        text-align: center;
    }

      .mainHeader nav a:link, .mainHeader nav a:visited {
        padding: 10px 25px;
        height: 20px;
        display: block;
    }

      .mainFooter {
        width: 100%;
    }
}

 

[MrMurphy]

Hallo

Ich kann nur erkennen, dass du statt des Elements body im CSS die Klasse .body verwendest.

Wenn gar nichts funktioniert passt die Hardware nicht zu der Media Query.

Wie testest du das ganze denn überhaupt?

Gruss

MrMurphy

 

[Paludis]

Ok, die Klasse body habe ich rausgenommen.
Testen tue ich das Ganze mit den developer tools von chrome für die verschiedenen bildschirmgrössen.
Funktioniert aber trotzdem nicht.

Eine Anmerkung noch: seltsamerweise funktionieren die meisten anderen queries. Habe noch nicht alle proobiert aber die meisten funktionieren.

 

[MrMurphy]

Hallo

Testen tue ich das Ganze mit den developer tools von chrome für die verschiedenen bildschirmgrössen.

Das habe ich befürchtet.

Zum Testen sollten immer Originalgeräte und Originalbrowser verwendet werden.

Emulatoren, grade auch kostenlose, können nicht alle Eigenschaften der Originalgeräte nachstellen.

In deinem Fall das "device-width". Chrome (und andere Browser) geben nur die Fenstergröße weiter, aber keine Gerätegrößen.

Tests funktionieren also nur mit einem Originalgerät. Oder (falls es sowas überhaupt gibt) Emulatoren, die alle Gerätedaten nachbilden. Mit Browsertools können nur Fenstergrößen nachgebildet werden.

Gruss

MrMurphy

 

[Paludis]

Danke für die Antwort. Es ist leider schwierig, es auf allen Geräten zu testen, da mir das Geld fehlt, ein Testlabor mit vielen Geräten einzurichten.

Jedenfalls funktionieren meine anderen queries ausser der query für 320x480px, die will einfach nicht funktionieren. Was könnte der Grund dafür sein?

Wenn ich die Fenstergrösse auf den gewünschten Bereich setze und Änderungen durchführe, funktioniert das in den anderen queries.