CODEWITHSUNDEEP
htmlcssweblandscape
Yael
Yael

Reputation: 23

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

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; 
    }
}

Upvotes: 1

Views: 1272

Answers (1)

Shahil Mohammed
Shahil Mohammed

Reputation: 3868

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

Upvotes: 1

Related Questions