Perdita di corrispondenza con le query multimediali dopo aver cambiato ritratto-paesaggio-ritratto

Question

Non so davvero cosa fare con questo, ho una tavoletta Galaxy 2, tablet da 7 pollici e utilizzo di chrome come browser (v26.0.1410.58) in Android 4.1.1. Sto caricando l'app Web in modalità verticale e la query sul supporto corrisponde perfettamente, la passo alla modalità orizzontale e tutto funziona bene, ma quando ritorna in modalità verticale, il browser non si applica stile, e facendo il debug dell'applicazione con il tablet USB collegato al PC, posso vedere che Chrome non ha trovato più una corrispondenza con nessuna query multimediale.

La media query sto applicando è:

(device-width: 600px) e (max-device-height: 1024px) e (max-width: 600px) e (min -device-height: 976px) e (Orientamento: Verticale)

Se controllo larghezza e l'altezza del dispositivo nel browser dopo e prima che questo accada, non cambiano affatto neanche.

alcuni dati che possono essere utili:

screen.width: 600

screen.height: 976

$ (window) .width(): 600

Sta succedendo solo in questo dispositivo e ho bisogno di supportare l'app in questa scheda.

Answer 1

Non riesco a testare il dispositivo, ma di solito si limitano a richieste di media più semplici.

Forse provando solo la larghezza massima invece della larghezza del dispositivo. Trovo che fare questo accoppiato con layout basati sulla percentuale significa che non sono specifico del dispositivo con i miei layout.

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

Answer 2

media query Orientamento sono un vero e proprio dolore per sostenere ... Vorrei consigliare di stare lontano da loro. Ho un ottimo set di media query che uso. Ho semplicemente invertito le richieste dei media della Fondazione Zurb. Vedi di seguito ...

// 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

si dovrebbe cercare

@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 */ 

Se avete bisogno di uno stile di lavorare solo nel tra la gamma del dispositivo ... Obs: scrivere il bit orientamento solo se vuoi applicare gli stili in uno dei due.

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

Eliminare gli altri valori dichiarati, creando un conflitto a causa dell'altezza.