特定設備媒體查詢不起作用

Question

我正在向我的滑塊寫入媒體查詢。那邊的寬度是100％，高度應該手動給出。爲什麼我寫了@media查詢每一個寬像

@media only screen and (width : 320px) and (height: 568px) { 
 
.demo .zoomer_wrapper { height: 450px; } 
 
} 
 
@media only screen and (width : 568px) and (height: 320px) { 
 
.demo .zoomer_wrapper { height: 230px; } 
 
}

這就是我正在測試中http://cybercrab.com/screencheck/和Firefox的決議。在這裏，每一件事情都適用於每一組寬度和高度。但是當我檢查特定設備時，這些設備無法正常工作。請幫我解決這個問題。

Answer 1

媒體手機和平板電腦的查詢應該是這樣的：

@media only screen and (max-device-width : 320px){} 

Documentation

---

編輯

爲例（只有個例，未測試） ：

/*if landscape*/ 
@media only screen and (max-device-height: 320px) and (orientation : landscape){ 
    .demo .zoomer_wrapper { height: 230px; } 
} 
@media only screen and (max-device-height: 800px) and (orientation : landscape){ 
    .demo .zoomer_wrapper { height: 710px; } 
} 
@media only screen and (max-device-height: 960px) and (orientation : landscape){ 
    .demo .zoomer_wrapper { height: 870px; } 
}  
/*if portrait*/ 
@media only screen and (max-device-height: 320px) and (orientation : portrait){ 
    .demo .zoomer_wrapper { height: 230px; } 
} 
@media only screen and (max-device-height: 480px) and (orientation : portrait){ 
    .demo .zoomer_wrapper { height: 390px; } 
} 
@media only screen and (max-device-height: 640px) and (orientation : portrait){ 
    .demo .zoomer_wrapper { height: 530px; } 
}