1

I have a confusion. I have seen in many sites that using max-device-width is deprecated and I need to use max-width instead. So I need to hind a banner when in landscape mode and here is how I did it:

/*landscape*/
@media screen
and (max-width: 1024px) and (orientation:landscape)
{
    .hide-row-on-landscape {
        display:none !important;
    }
}

On dev tool in chrome it works like a charm but when I tests it in real iphone I can not see it working. So I decided to use the following:

/*landscape*/
@media screen
and (max-width: 1024px) and (orientation:landscape),
(max-device-width: 1024px) and (orientation:landscape)
{
    .hide-row-on-landscape {
        display:none !important;
    }
}

and it worked. Now I am confused if max-device-width is deprecated and shouldnot be used why max-width does not work in this scenario? Also what is the best solution for what i am trying to do?

**Update

I know there are a lot of answers supporting max-width without device but non of them explain why max-width does not support orientation. So none of them not answers my scenario: I need to use (orientation:landscape) and it seems that when it comes to this property max-width does not handle that

Hamed Minaee
  • 2,190
  • 3
  • 22
  • 55
  • Possible duplicate of [Should I use max-device-width or max-width?](https://stackoverflow.com/questions/18500836/should-i-use-max-device-width-or-max-width) – Adam Buchanan Smith May 15 '19 at 21:22
  • @AdamBuchananSmith Actually it does not answer my scenario: I need to use (orientation:landscape) and it seems that when it comes to this property max-width does not handle that. Any idea? – Hamed Minaee May 16 '19 at 12:13

1 Answers1

0

Hi You can simply use only this one:

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

}

it will work on all devices mobile + tabs + browsers(old, new). why you need this (orientation:landscape)?

Tayyab Roy
  • 196
  • 1
  • 6