css expanding based on portrait or landscape screen size?

Question

I have two divs that are floating next to each other. What i would like is to have it have a width of 100px when you are looking at it in portrait mode and lets say 200 px in landscape. This happens viewing on a mobile device actually.

So the div will expand when in landscape mode and shrink up a bit in portrait.

Any ideas?

Solution 1

Well this is not possible with CSS2, but it would be possible to do what you want with Javascript (read out the screen size etc.).

I'm not sure what technology you are looking into, but CSS3 provides exactly what you want with CSS3 Media Queries.

With CSS3 you have fun stuff like this (or you could even specify width e.g. 200px):

/* Portrait */
@media screen and (orientation:portrait) {
   /* Portrait styles here */
}
/* Landscape */
@media screen and (orientation:landscape) {
   /* Landscape styles here */
}

Check out this example page for more explanation, or this one.

EDIT Just because I found this page today: Hardbroiled CSS3 Media Queries - very good writeup.

Solution 2

You can do this by using the css media feature "orientation". This way you can specify styles depending on screen orientation, unrelated from screen size. You can find the official w3.org definition about this media feature here. Combined with the specifications on developer.mozilla.org this will explain how it works.

---

Quote from w3.org about the ‘orientation’ media feature:

The ‘orientation’ media feature is ‘portrait’ when the value of the ‘height’ media feature is greater than or equal to the value of the ‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.

A note/quote from developer.mozilla.org about the "orientation" feature:

Note: This value (ie portrait or landscape) 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.

---

So to reiterate, it is not actually the screen orientation that triggers portrait or landscape media queries. However it is the ratio between height and width of the screen! Because of this it also makes sense to use the "orientation feature" with non mobile/tactile devices hence I've added a small demo to show the behaviour of these media queries.

JSFIDDLE DEMO (try resizing the view port)

Here are the representative media queries affecting portrait and landscape orientation.

 @media screen and (orientation:portrait) {
     /* Portrait styles */
     /*set width to 100px */

 }
 @media screen and (orientation:landscape) {
     /* Landscape styles */
     /* set width to 200px*/

 }

Comments

[saadk]

simple and elegant way.. thumbs up for you !