CODEWITHSUNDEEP
cssmedia-queries
Higeath
Higeath

Reputation: 185

Media query affecting any device with portrait/landscape orientation

As the title says, i'm trying to target every device in portrait mode.

My current media queries:

'mobile':

@media (max-width: 639px),
@media (orientation: portrait) {}

'desktops' etc:

@media only screen and (min-width: 640px) {}

For some reason orientation: portrait does not affect ipad mini 2. Why?

Upvotes: 1

Views: 937

Answers (3)

Alessandro Incarnati
Alessandro Incarnati

Reputation: 7246

The Ipad Mini has an higher resolution than the one used in your media query.

Also you don't need to repeat the @media on each line. 

@media(max-width: 639px),
@media (orientation: portrait) {}

Try:

@media (max-width: 639px) and (orientation: portrait){

}

For the ipad mini:

IPAD MINI PORTRAIT

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1)  { 

}

You can also be more specific targeting the higher pixel density of the ipad mini which is higher then the Ipad:

/* ipad Mini Portrait */
@media only screen and (width:768px) and (resolution: 163dpi) {

}

/* ipad Mini Landscape */
@media only screen and (width:1024px) and (resolution: 163dpi) {

}

Upvotes: 0

kasper Taeymans
kasper Taeymans

Reputation: 7026

You need to use all to target all devices

@media all and (orientation:portrait) {  
    /* Portrait  */  
}  
@media all and (orientation:landscape) {  
    /* Landscape */  
}

Upvotes: 0

Diego López
Diego López

Reputation: 1609

I think you have a syntax error, try this better 

@media (max-width: 639px), (orientation: portrait) {}

rather than repeating the @media directive 

@media (max-width: 639px),
@media (orientation: portrait) {}

check on this page a more specific media queries for the ipad mini: http://stephen.io/mediaqueries/#iPadMini

Upvotes: 1

Related Questions