Home / Questions / 20599
Accepted
Alvaro Montoro
Asked: 2020-08-16 08:30:14 +0800 CST 2020-08-16 08:30:14 +0800 CST

Detect if orientation is portrait or landscape

  • 772

I want to apply different CSS styles depending on whether the orientation of the device is vertical (portrait mode ) or horizontal (landscape mode ) . Can it be achieved with just CSS?

Is there an alternative? I suppose you could always detect the width and height of the window with JavaScript and from there decide which styles to apply, but I wonder if there is an easier way that uses only CSS (if not, a JS solution would be nice).

javascript

4 Answers

  1. Best Answer

    Theoretically it is possible only with css, I mean theoretical because I have never tried it:

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

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

    Some documentation on w3 and MDN .

    According to the w3 specification:

    The orientation is portrait when the viewport's height is greater than or equal to width, otherwise the orientation is landscape .

    There is a rather interesting note in the MDN documentation:

    Note that when displaying the keyboard on a mobile device in portrait mode , the viewport may be wider than it is tall, so the browser may use landscape styles at that time, not portrait .

    Some alternatives:

    • 10

  2. In CSS3 it exists in mediathe optionorientation

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

    Example

    html {
	height: 100%;
}
body {
	height: 100%;
}
.demo-wrappper {
	display: table;
	width: 100%;
	height: 100%;
}
.demo-wrappper h1 {
	color: #fff;
	text-align: center;
	margin: 0;

	display: table-cell;
    vertical-align: middle;
}
@media all and (orientation:portrait) {
	body {
		background: #00C203;
	}
	.demo-wrappper .landscape {
		display: none;
	}
}
@media all and (orientation:landscape) {
	body {
		background-color: #F08B48;
	}
	.demo-wrappper .portrait {
		display: none;
	}
}
    <div class="demo-wrappper css-orientation">
	<h1 class="portrait">Portrait</h1>
	<h1 class="landscape">Landscape</h1>
</div>

    • 5

  3. At the moment the best way to do it in Javascript is through the API window.matchMedia() (doc) since it has optimal compatibility with browsers. Still, in the case of using a new or unconventional browser, it's not bad to add a condition elsethat offers a workaround like the one I recommend below.

    By comparing the height and width of the device, its orientation can be determined based on the highest value, the disadvantage of this method is that it can fail if the device's keyboard is displayed, since some browsers subtract the space that the keyboard occupies from these values altering the result. But if the check is done at page load time this problem does not persist, so this seems to be an excellent option B.

    Code: 

    window.addEventListener("orientationchange", ()=> {
    console.log(getOrientation());
});

function getOrientation() {
    if (window.matchMedia("(orientation: portrait)").matches) {
        var current_mode = 'Portrait';
    }
    else if (window.matchMedia("(orientation: landscape)").matches) {
        var current_mode = 'Landscape';
    }
    else {
        var current_mode = window.innerWidth < window.innerHeight ? "Portrait" : "Landscape";
    }
    return current_mode
};

    • 1

  4. In javascript you can do:

    window.addEventListener("orientationchange", ()=> {
    console.log(window.screen.orientation);
});

if (window.matchMedia("(orientation: portrait)").matches) {
    /// portrait codigo
}

if (window.matchMedia("(orientation: landscape)").matches) {
   /// landscape codigo
}
    • 0