203

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) { ... }
ndequeker
  • 7,932
  • 7
  • 61
  • 93
Francesco
  • 24,839
  • 29
  • 105
  • 152

7 Answers7

526

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

Richard Schneider
  • 34,944
  • 9
  • 57
  • 73
  • 89
    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. – Johann Combrink Mar 10 '17 at 08:58
  • 15
    @JohannCombrink Really important you mentioned this. Opening the keyboard will mess up the design. Good you point this out. – lowtechsun Apr 26 '17 at 11:26
  • 2
    Reference for @JohannCombrink's comment: https://stackoverflow.com/q/8883163/363448 – ndequeker Feb 15 '18 at 10:42
  • 5
    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. – Muhammad bin Yusrat Mar 07 '18 at 10:37
  • 2
    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. – Benny Schmidt Sep 25 '18 at 00:48
  • 1
    @BennyNightingale is not just landscape is also more tiny screen. need a whole different design – pery mimon Mar 15 '22 at 13:56
40
@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

mistagrooves
  • 2,337
  • 15
  • 16
  • 1
    Orientation depends on the device. Some tablets report orientation = 0 when in landscape mode. iPhones report differently from Samsung Galaxies. – BlackMagic Oct 18 '15 at 13:19
32

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

Matthew Carpenter
  • 660
  • 6
  • 9
jitu
  • 321
  • 3
  • 3
12

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

BastianBalthasarBux
  • 436
  • 4
  • 8
  • Is aspect ratio dependent on the orientation of the device - or is it fixed per device? – Michael S Nov 13 '21 at 23:13
  • Aspect ratio depends, as written, on the browsers viewport. Thus it slightly depends on orientation, as browsers resize depending on orientation on mobile devices. – BastianBalthasarBux Feb 17 '22 at 12:00
3

The orrientaion doesn't seems to work stable.
Working out with aspect-ratio maybe a better way.

@media only screen and (max-aspect-ratio: 1/1){
//portrait
}
@media only screen and (min-aspect-ratio: 1/1){
//horizontal
}
Tommy Au
  • 86
  • 4
1

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).

BlackMagic
  • 4,378
  • 1
  • 21
  • 14
  • 1
    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.) – interDist Jan 28 '20 at 20:11
  • 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. – Darren S Nov 21 '21 at 00:14
0

Simply we can test using below code

@media all and (orientation:portrait) {
 // simple css for portrait mode of mobile device
}

@media all and (orientation:landscape) {
 // css for landscape mode
}

More Info: https://www.w3.org/TR/mediaqueries-3/#orientation

Rahul Daksh
  • 212
  • 1
  • 7