Losing Media Query Matching nach dem Wechsel Porträt-Landschaft-Porträt

Question

Ich weiß wirklich nicht, was ich damit zu tun habe, habe ich ein Galaxy Tab 2, 7 Zoll-Tablet und mit Chrom als Browser (v26.0.1410.58) in Android 4.1.1. Ich lade die Web-App im Hochformat-Modus und die Medienabfrage passt gut, ich schalte es in den Querformat-Modus, und alles funktioniert auch gut, aber wenn ich es in den Hochformat-Modus umschalte, wird der Browser einfach nicht angewendet Stil überhaupt, und Debuggen der App mit dem Tablet USB mit dem PC verbunden, kann ich sehen, Chrome fand keine Übereinstimmung mit einer Medienabfrage mehr.

Die Medien Abfrage Ich Aufbringen:

(device-Breite: 600 Pixel) und (max-device-Höhe: 1024px) und (max-Breite: 600 Pixel) und (min -Gerät-height: 976px) und (Orientierung: Portrait)

Wenn ich das Gerät die Breite und Höhe im Browser überprüfen nach und bevor dies geschieht, sie entweder gar nicht ändern.

Einige Daten, die nützlich sein können:

screen.width: 600

screen.height: 976

$ (Fenster) .width(): 600

Es passiert nur in diesem Gerät und ich muss die App in diesem Tab unterstützen.

Answer 1

Ich habe dein Gerät nicht zum Testen, aber ich bleibe normalerweise bei einfacheren Medienabfragen.

Vielleicht versuchen nur Max-Breite statt Gerätebreite. Ich finde, dass dies in Verbindung mit prozentualen Layouts bedeutet, dass ich mit meinen Layouts nicht gerätespezifisch bin.

@media (max-width: 600px) {...}

Answer 2

Orientierung Medienanfragen sind ein echten Schmerzen ... zu unterstützen, die ich von ihnen weg zu bleiben würde Sie raten. Ich habe eine wirklich gute Auswahl an Medienanfragen, die ich verwende. Ich habe nur die Medienanfragen von Zurbs Stiftung rückgängig gemacht. Siehe unten ...

// Small screens 
@media only screen { } 
/* Define mobile styles */ 

@media only screen and (max-width: 40em) { } 
/* max-width 640px, mobile-only styles, use when QAing mobile issues */ 

// Medium screens 
@media only screen and (min-width: 40.063em) { } 
/* min-width 641px, medium screens */ 

@media only screen and (min-width: 40.063em) and (max-width: 64em) { } 
/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */ 

// Large screens 
@media only screen and (min-width: 64.063em) { } 
/* min-width 1025px, large screens */ 

@media only screen and (min-width: 64.063em) and (max-width: 90em) { } 
/* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */ 

// XLarge screens 
@media only screen and (min-width: 90.063em) { } 
/* min-width 1441px, xlarge screens */ 

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } 
/* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */ 

// XXLarge screens 
@media only screen and (min-width: 120.063em) { } 
/* min-width 1921px, xxlarge screens */ 

Answer 3

Sie sollten versuchen,

@media only screen and (max-device-width: 600px) { /* STYLES GO HERE */} 
/* styles apply only in portrait mode */ 

@media only screen and (min-device-width: 601px) { /* STYLES GO HERE */} 
/* styles apply only in landscape mode */ 

Wenn Sie einen Stil müssen nur arbeiten in zwischen dem Bereich des Geräts ... Obs: schreiben die Orientierung Bit Nur Wenn Sie möchten, dass die Stile in einem der beiden angewendet werden.

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

Lassen Sie die anderen Werte fallen, die Sie deklariert haben, es entsteht ein Konflikt wegen der Höhe.