Web screen orientation

Question

Web screen orientation

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I have a doubt I hope you can help me. I have a media query for a mobile resolution but I want to restrict the horizontal orientation, someone knows how that can be done.

css

asked by Obed Del Valle 09.10.2018 в 16:08

source

3 answers

How do I change the name generated by the firebase when it registers the data? Menu with Menu dropdown does not link to the parent Bootstrap link

score 1 · Answer 1

1

The syntax is:

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

answered by 09.10.2018 в 17:28

score 0 · Answer 2

You can try this way

@media only screen and (orientation: portrait) {}

@media only screen and (orientation: landscape) {}

and you can also try it with JavaScript:

$(document).ready(function () {
  function reorient(e) {
    var portrait = (window.orientation % 180 == 0);
    $("body > div").css("-webkit-transform", !portrait ? "rotate(-90deg)" : "");
  }
  window.onorientationchange = reorient;
  window.setTimeout(reorient, 0);
});

score 0 · Answer 3

With CSS you can not restrict or prevent the device from being rotated, but you can create a CSS for when the screen is horizontal orientation:landscape or vertical orientation:portrait ; to activate when you use one or the other in your HTML where you reference your CSS file, you can indicate with the media attribute when you use one and when another is used, example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Titulo</title>
    <link rel="stylesheet" href="../portrait.css" media="only screen and (orientation:portrait)">
    <link rel="stylesheet" href="../landscape.css" media="only screen and (orientation:landscape)">
</head>

As you'll see there are two references in HTML to two CSS files, one called portrait.css and the other landscape.css , and in those references there is a% attribute media with the value only which indicates that it will only be used if and only if the following happens: screen and (orientation:portrait|landscape) . By saying this you are saying that CSS will be executed when the screen has a horizontal or vertical orientation.

Now if you have a CSS file you can also make that rule in that file like this:

@media only screen and (orientation:portrait) {
  border:1px solid red;
}

@media only screen and (orientation:landscape) {
  border:1px solid blue;
}

With this you can divide the behavior of CSS according to the orientation of your device.