CODEWITHSUNDEEP
browsercsstabletmedia-queries
Francesco
Francesco

Reputation: 25269

How to detect the device orientation using CSS media queries?

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

Upvotes: 218

Views: 260408

Answers (7)

Tommy Au
Tommy Au

Reputation: 114

orientation does not seem to work as desired.
Working with aspect-ratio may be the better way.

@media only screen and (max-aspect-ratio: 1/1) {
//portrait
}
@media only screen and (min-aspect-ratio: 1/1) {
//landscape
}

Upvotes: 6

Rahul Daksh
Rahul Daksh

Reputation: 230

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

Upvotes: 0

BastianBalthasarBux
BastianBalthasarBux

Reputation: 446

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

Upvotes: 13

Richard Schneider
Richard Schneider

Reputation: 35464

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

Upvotes: 544

jitu
jitu

Reputation: 321

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

Upvotes: 32

BlackMagic
BlackMagic

Reputation: 5808

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

Upvotes: 1

mistagrooves
mistagrooves

Reputation: 2337

@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

Upvotes: 41

Related Questions