Media requests do not work properly in the landscape

Question

I have the following media query:

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

When viewing a website in portrait mode on my Nexus 5, it looks the way I want. However, when I put the phone in landscape mode, it shows the full site, and not the one indicated in this media request.

Why is this happening? I also tried:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

This did not solve the problem.

Answer 1

In fact, the Nexus 5 has a maximum width of 590px , and you specified the maximum width: 480px ....

See Viewport Sizes

You can also request multimedia queries: -

@media screen and (min-width : 320px) and (max-width : 480px) and (orientation : portrait) {
.class-name {}
}

@media screen and (min-width : 320px) and (max-width : 480px) and (orientation :landscape) {
.class-name {}
}

it should work for you ... try with this

Answer 2

Nexus 5 360x598, , -. nexus 5, 599px.

@media screen and (max-width: 599px) { ... }