CODEWITHSUNDEEP
cssipadmedia-queries
applaps
applaps

Reputation: 17

@media query not working for iPad in Portrait

I have the following media queries... The Landscape media query is always taking precedence. I tried changing the order of these thinking that if the Portrait one was first it would take precedence, but that did not work. In fact, even when I remove the Landscape media query completely and just leave the Portrait it doesn't work, so it seems like the Portrait media query is broken somehow :S

Here are my two queries:

/* iPad Retina, landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) { 
#container {
 width: 995px !important;
}


#currentroom_convo {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto !important;
   overflow-x: hidden !important;
}

.slimScrollBar .ui-draggable {
   opacity: 0 !important;
 }

}


/* iPad Retina, portrait*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2)  { 

#container {
 width: 300px !important;
}



#currentroom_convo {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.slimScrollBar .ui-draggable {
   opacity: 0 !important;
 }

 div .topbar {
    max-width: 300px !important;
    }

}

I have this meta tag in my header:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui, user-scalable=no">

Please note I am using the !important as I need to override some other CSS from a third-party plugin. Removing !important in the landscape query results in no change to the #container element (still doesn't even pick up the Portrait query).

I have tried searching around here but none of the answers seemed to work for me. Thanks :)

Upvotes: 0

Views: 4225

Answers (1)

demonofthemist
demonofthemist

Reputation: 4199

Your approch is wrong. Please note that when you change device orientation forn landscape to portait, your width become height & height become width. In your code your are not changing those values accordingly. Thus as per your condition portait styles apply when screen width is between 786px to 1024px. I think this condition is not satisfied cause ipad resotution width in portait mode is 786px at standard. Thus your styles never get applied.

Also don't use max-device-width & min-device-width & max-device-width instead use min-width & max-width. The resone behind this is that max-device-width gives you width of entire screen, but max-width giv you actual width of browser viewport.

Keeping all this things in mind change your code to following:

/* iPad Retina, landscape*/
@media only screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){ 
    /* Styles */
}

/* iPad Retina, portrait*/
@media only screen and (max-width:768px) and (orientation:portrait){ 
    /* Styles */
}

Upvotes: 0

Related Questions