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