2012-04-14 5 views
0

Ich habe Probleme mit Medienabfragen, die CSS nicht laden oder den Stil korrekt anzeigen.CSS-Medienabfragen werden auf IPhone 4 nicht korrekt geladen

Was ich getan habe, war eine style480.css für mein iPhone und style.css für normal zu erstellen.

Ich lud

<meta name="viewport" content="width=device-width, initial-scale=1"/> 

über meine Website, so dass es funktionieren würde.

Ich legte die CSS auf der Hauptseite, um Stil 480 zu lesen, damit ich für das iPhone zu stilisieren. Alles sieht gut aus auf meinem iPhone, und natürlich war es nur eine langweilige Liste auf meinem Desktop.

Nachdem ich meine style480 abgeschlossen, kopiert I/klebte das CSS in eine

@media only screen and (max-width: 480px) { 
{ 
    body {width:100%;} 
} 

in meinem Stil CSS.

Klingt ziemlich Standard.

aber es ist nicht richtig auf meinem iPhone Formatierung

Das Top-nav-Menü (verwenden ich html 5 <nav>) nach links geschoben zu werden, einige der Listen schwebte werden, wenn sie nicht sein sollte.

Es ist wie das iPhone Elemente von innerhalb und außerhalb der Medienabfrage mischen.

ich sogar versucht haben, die Medienabfrage oben setzen, ist es auf der Unterseite und Laden setzen

-webkit-min-device-pixel-ratio : 1. 

Das Gleiche gilt, ist es, wie es die CSS mischt.

Ich habe sogar versucht, die CSS-Dateien separat auf dem HTML ... genau das gleiche zu laden.

Die einzige Möglichkeit, meine Iphone CSS richtig laden zu können, ist, wenn ich es als Haupt-CSS für die Seite festlegen. Wenn ich 2 Sätze css lade funktioniert es nicht auf dem iPhone (aber es funktioniert auf meinem Laptop)

Wenn ich einen Weg finden kann, um die CSS aus dem Iphone zu sehen, könnte ich in der Lage sein herauszufinden, was es ist tun, aber bis sie bin ich ratlos, warum es das CSS nicht korrekt lädt

Antwort

0

Es ist wie das iPhone Elemente von innerhalb und außerhalb der Medienabfrage mischen.

Nun, ja, so funktioniert es. Das Material außerhalb der Medienabfrage wird verwendet, es sei denn, etwas innerhalb der Medienabfrage überschreibt es direkt. Sie sollten nicht Ihren gesamten Code in die Medienabfrage einfügen, nur die Dinge, die Sie für diese Auflösung anpassen möchten.

Eine Medienabfrage ersetzt nicht Ihre CSS-Hauptdatei, sondern ergänzt sie.