Search code examples
iphonecssmobile-safari

Determine if iPhone Safari is in vertical viewport mode with CSS

I have been using

@media screen and (max-width: 480px)

to determine if the device used for viewing is an iPhone, however, it seems this rule applies to both the vertical and horizontal viewport modes.

How can I determine if the viewport is indeed vertical (i.e. smaller width viewport)? I have tried 

@media screen and (max-width: 320px)

but it doesn't seem to register at all.

Also, all styles located under the (max-width: 480px) restriction also gets applied to the vertical mode.

Solution

  • You can use the orintation media queries:

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