How do I target portrait mode with a media query?

General Discussions
#1

How do I target portrait mode with a media query?

#2

Hi Dipen,

You can use the orientation media query to target portrait mode.

For example:

@media (orientation: portrait) {
    /* Styles for portrait mode */
}

Learn how to use media query in portrait mode:

#3

With my experience in responsive design, another effective way is using the aspect-ratio media query:

@media (min-aspect-ratio: 3/4) {
    /* Styles for portrait mode */
}

This query targets devices with an aspect ratio greater than or equal to 3:4, which typically corresponds to portrait mode.

#4

Building on my extensive background in front-end development, you can also use a combination of max-width and max-height media queries:

@media (max-width: 768px) and (max-height: 1024px) {
    /* Styles for portrait mode */
}

This query targets devices with a maximum width of 768 pixels and a maximum height of 1024 pixels, which are common dimensions for portrait-oriented devices.