Block landscape mode, via Css, on mobile display

Asked

Viewed 402 times

1

I am doing a project, and I need to block the mode "landscape",on a specific screen (login screen), I want that when logging in, appear a message for user to use landscape mode, so better view the system.

Does anyone have any idea ?

css3

1 answer

0


Thiago think that block completely vc can only with Javascript.

But you can treat CSS 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 show a message only when Mobile is in landscape mode vc can still do so for example:

#minha-mensagem {
    display none;
}

@media screen and (orientation: portrait) {
  #minha-mensagem {
        display block;
    }
}

  • Thank you so much for your help.

  • @Thiagão I’m glad it worked out! If my answer helped you in any way consider marking it as Accept, in this icon below the arrows on the left side of my answer :) so the site does not get open questions pending without response accepted.

Browser other questions tagged css3

You are not signed in. Login or sign up in order to post.