How to detect the device orientation using CSS media queries?

Question

In JavaScript the orientation mode can be detected using:

if (window.innerHeight > window.innerWidth) {
    portrait = true;
} else {
    portrait = false;
}

However, is there a way to detect the orientation using CSS only?

Eg. something like:

@media only screen and (width > height) { ... }

Solution 1

CSS to detect screen orientation:

 @media screen and (orientation:portrait) { … }
 @media screen and (orientation:landscape) { … }

The CSS definition of a media query is at http://www.w3.org/TR/css3-mediaqueries/#orientation

Solution 2

@media all and (orientation:portrait) {
/* Style adjustments for portrait mode goes here */
}

@media all and (orientation:landscape) {
  /* Style adjustments for landscape mode goes here */
}

but it still looks like you have to experiment

Solution 3

I think we need to write more specific media query. Make sure if you write one media query it should be not effect to other view (Mob,Tab,Desk) otherwise it can be trouble. I would like suggest to write one basic media query for respective device which cover both view and one orientation media query that you can specific code more about orientation view its for good practice. we Don't need to write both media orientation query at same time. You can refer My below example. I am sorry if my English writing is not much good. Ex:

For Mobile

@media screen and (max-width:767px) {

..This is basic media query for respective device.In to this media query  CSS code cover the both view landscape and portrait view.

}


@media screen and (min-width:320px) and (max-width:767px) and (orientation:landscape) {


..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view.

}

For Tablet

@media screen and (max-width:1024px){
..This is basic media query for respective device.In to this media query  CSS code cover the both view landscape and portrait view.
}
@media screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){

..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view.

}

Desktop

make as per your design requirement enjoy...(:

Thanks, Jitu

Solution 4

I would go for aspect-ratio, it offers way more possibilities.

/* Exact aspect ratio */
@media (aspect-ratio: 2/1) {
    ...
}

/* Minimum aspect ratio */
@media (min-aspect-ratio: 16/9) {
    ...
}

/* Maximum aspect ratio */
@media (max-aspect-ratio: 8/5) {
    ...
}

Both, orientation and aspect-ratio depend on the actual size of the viewport and have nothing todo with the device orientation itself.

Read more: https://dev.to/ananyaneogi/useful-css-media-query-features-o7f

Solution 5

In Javascript it is better to use screen.width and screen.height. These two values are available in all modern browsers. They give the real dimensions of the screen, even if the browser has been scaled down when the app fires up. window.innerWidth changes when the browser is scaled down, which can't happen on mobile devices but can happen on PCs and laptops.

The values of screen.width and screen.height change when the mobile device flips between portrait and landscape modes, so it is possible to determine the mode by comparing the values. If screen.width is greater than 1280px you're dealing with a PC or laptop.

You can construct an event listener in Javascript to detect when the two values are flipped. The portrait screen.width values to concentrate on are 320px (mainly iPhones), 360px (most other phones), 768px (small tablets) and 800px (regular tablets).

View more solutions

Comments

[BlackMagic]

Orientation depends on the device. Some tablets report orientation = 0 when in landscape mode. iPhones report differently from Samsung Galaxies.

[Johann Combrink]

Note: This value does not correspond to actual device orientation. Opening the soft keyboard on most devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.

[lowtechsun]

@JohannCombrink Really important you mentioned this. Opening the keyboard will mess up the design. Good you point this out.

[ndequeker]

Reference for @JohannCombrink's comment: stackoverflow.com/q/8883163/363448

[Muhammad bin Yusrat]

It may not be a bad thing to apply a different style when the keyboard is popped up because the visible area is generally more fit for the style that applies to the landscape mode. So may not be a bummer.

[Benny Schmidt]

I like Muhammad's comment: If a software keyboard causes a viewport to be shorter than it is wide, the viewport would therefore be a landscape orientation (even if you're holding the physical device normally). The CSS is working as intended in my opinion.

[interDist]

It is important to note that iOS does NOT flip the screen.width and screen.height values when the iPhone is rotated. It always reports the same values. You must use the window.orientation property to determine if the device was rotated... (the value will be 90 or -90 for the landscape mode.)

[Michael S]

Is aspect ratio dependent on the orientation of the device - or is it fixed per device?

[Darren S]

I'm glad this answer is here because it leads to the next logical solution if the pure CSS method isn't working out for any reason.

[BastianBalthasarBux]

Aspect ratio depends, as written, on the browsers viewport. Thus it slightly depends on orientation, as browsers resize depending on orientation on mobile devices.

[pery mimon]

@BennyNightingale is not just landscape is also more tiny screen. need a whole different design