How to detect landscape mode and hide html content using css, queries or js

Question

In my responsive website I want to control the way the website is viewed in mobile devices, and forbid viewing from landscape mode.

I searched through the stackoverflow site and found the option of putting a warning message.

I tried the css code below but it didn't work. Do you have any suggestions?

@media screen and  (max-width: 980px) and (orientation:portrait){
    #warning-message { 
        display:none; 
    }
}

@media screen and  (max-width: 980px) and (orientation:landscape){
    .content { 
        display:none; 
    }
    .mobile {
        display:none; 
    }
    #warning-message { 
        display:block; 
    }
}

Possible duplicate of https://stackoverflow.com/questions/5735467/css-media-queries-is-it-possible-to-detect-portrait-landscape-tablet-mode — Granny, Oct 03 '17 at 09:18

score 1 · Answer 1 · answered Oct 03 '17 at 09:51

The ‘orientation’ media feature is ‘portrait’ when the value of the ‘height’ media feature is greater than or equal to the value of the ‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.

@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }

Source : https://www.w3.org/TR/css3-mediaqueries/#orientation

How to detect landscape mode and hide html content using css, queries or js

1 Answers1