特定设备媒体查询无效

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; }
}