Am working on a project where I need to distinguish between the landscape and portrait modes of iPhone, iPad using media queries. Also, am using iPad 3, iPhone 4s.
As simple and straightforward as this may sound, I am having the hardest time getting this to work.
The closest I got to is this :-
@media (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait) {
/*iPad portrait*/
}
@media (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape) {
/*iPad landscape*/
}
@media (max-device-width: 480px)
and (orientation: portrait) {
/*iPhone portrait*/
}
@media (max-device-width: 480px)
and (orientation: landscape) {
/*iPhone landscape*/
}
But, this does not differentiate between the portrait / landscape modes of the iPhone.
Any clues on what could be wrong ?
Here is some sample code that demonstrates functioning queries on an iPhone. It is white in portrait, black in landscape. You can ignore the base64 part, that was just to supply an icon without needing an external file: