Block landscape mode via Css in mobile view

Navigation
1

I'm doing a project, and I need to block the "landscape" mode, on a specific screen (login screen), I want to when I log in, a message to user to use landscape mode, so I better view the system.

Does anyone have any ideas?

    
asked by anonymous 18.04.2018 / 14:26

1 answer

0

Thiago I think blocking completely you can only achieve with JavaScript.

But you can treat CSS in this way for example 

<meta http-equiv="ScreenOrientation" content="autoRotate:disabled">

And create a specific .CSS for each type of orientation. 

<link rel="stylesheet" type="text/css" href="css/paisagem.css" media="screen and (orientation: landscape)">
<link rel="stylesheet" type="text/css" href="css/retrato.css" media="screen and (orientation: portrait)">

If you want to display a message only when the phone is in landscape mode you can still do this for example: 

#minha-mensagem {
    display none;
}

@media screen and (orientation: portrait) {
  #minha-mensagem {
        display block;
    }
}
  • Reference link for you to see more about @media and screen orientation link
18.04.2018 / 14:32
Factoring Hackerrank Solution - Using Only Algorithms Autofocus in EditText does not work