Utrata zgodności zapytania dotyczącego multimediów po przełączeniu portret-portret-portret

Question

Naprawdę nie wiem co z tym zrobić, mam tablet Galaxy 2, 7 cali i używałem chrome jako przeglądarki (v26.0.1410.58) w Android 4.1.1. Załaduję aplikację internetową w trybie pionowym, a zapytanie o media pasuje do siebie, przełączam ją w tryb poziomy i wszystko działa dobrze, ale po przełączeniu z powrotem w tryb portretowy przeglądarka po prostu nie stosuje żadnych styl i debugowanie aplikacji za pomocą tabletu podłączonego do komputera, widzę, że chrome nie znalazło już pasującego zapytania.

Zapytanie nośnik ja stosowania jest:

(urządzenie szerokości: 600px) i (maks device wysokość: 1024px) i (maksymalna szerokość: 600px) i (minimum -device-height: 976px) i (orientacja: pionowa)

Gdybym sprawdzić szerokość i wysokość urządzenia w przeglądarce przed i po to się dzieje, że w ogóle nie zmieniać albo.

Niektóre dane mogą być przydatne:

screen.width 600

screen.height: 976

$ (okienne) .width(): 600

To się dzieje tylko na tym urządzeniu i muszę w tej karcie obsługiwać tę aplikację.

Answer 1

Nie mam urządzenia do testowania, ale zwykle trzymam się prostszych zapytań o media.

Być może próbuje się tylko maksymalnej szerokości zamiast szerokości urządzenia. Uważam, że robienie tego w połączeniu z układami opartymi na procentach oznacza, że ​​nie jestem zależny od urządzenia w moich układach.

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

Answer 2

zapytania mediów Orientacja to prawdziwy ból wspierać ... radzę się trzymać z dala od nich. Mam naprawdę dobry zestaw zapytań o media, z których korzystam. Po prostu odwracam opracowane przez Zurb's Foundation zapytania o media. Zobacz poniżej ...

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

Należy spróbować

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

Jeśli potrzebujesz styl pracować tylko w w przedziale z urządzeniem ... Obs: napisać trochę orientacji tylko, jeśli chcesz zastosować style w jednym z dwóch.

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

Usuń inne zadeklarowane wartości, powoduje to konflikt ze względu na wysokość.