CODEWITHSUNDEEP
cssmedia-queries
Rahimuddin
Rahimuddin

Reputation: 614

specific device media queries are not working

I am writing media queries to my slider. for that sider width is 100% and height should be given manually. Thats why I have written @media queries for every width like 

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

I am testing the resolutions in http://cybercrab.com/screencheck/ and firefox. Here every thing is working fine for every set of width and height. But when I checked in a particular device those are not working. Pls help me with this.

Upvotes: 1

Views: 68

Answers (1)

EdenSource
EdenSource

Reputation: 3387

Media queries for phones and tablets should look like :

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

Documentation

Edit

Exemple (and only an exemple, not tested) :

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

Upvotes: 2

Related Questions