Detect browser window orientation in CSS

Question

I want my website layout like this in landscape orientation:

+------------+---------------------+
| Header     |                     |
|            |        Content      |
| Navigation |                     |
+------------+---------------------+

and like this in portrait orientation:

+---------------------+
|        Header       |
+---------------------|
|                     |
|        Content      |
|                     |
+---------------------+
|      Navigation     |
+---------------------+

How can I achieve this?

I am aware of certain experimental CSS3 technologies(@media queries) to manage screen orientation, but they are not widely implemented and therefore of no use to me.

I am also aware of the many similar questions here on SO, but they all deal with targeting different screen sizes and I do not want that. All I want is to reliably detect orientation accross the most common current browsers, independent of screen size, and without JavaScript. That is, a desktop browser window resized to landscape orientation should result in the same rendering as a handheld mobile device in landscape orientation, independent of the actual pixel width.

So you want a non-Javascript, reliable way to detect orientation, without using CSS3? — SubjectCurio, Jan 02 '15 at 08:21
Welcome to 2015! `media queries` are not that *experimental* any more :) (From my personal point of view) — Roko C. Buljan, Jan 02 '15 at 08:25
I'm not really sure you'll get anywhere with those limitations, CSS2 was in use before wayy mobile devices existed in the way they do today. You're going to have to use new technologies to detect...new technologies. — SubjectCurio, Jan 02 '15 at 08:27
@chipChocolate.py http://caniuse.com/#search=media%20queries as you can see they're supported everywhere. — Roko C. Buljan, Jan 02 '15 at 08:28
@chipChocolate.py IE8 ... ok I agree with you. But now the question is: ***Do we need to control `landscape/portrait` on IE8*** ?? :) — Roko C. Buljan, Jan 02 '15 at 08:29
The problem is I'm not only targeting mobile devices. While my sit has about 50% mobile visitors, I still have around 15% using IE < 9. — , Jan 02 '15 at 08:33
@chipChocolate.py I'd rather exclude some browsers than use JS. — , Jan 02 '15 at 08:41
@what than help us kill IE8 and go for it! (go for `media queries`) — Roko C. Buljan, Jan 02 '15 at 08:42
@RokoC.Buljan lol, I'd love to, but you know many users will not update but avoid a "broken" website. — , Jan 02 '15 at 08:44
@what what's so important that your design has to show to IE8 users in portrait mode? Also please don't be afraid to use JS. — Roko C. Buljan, Jan 02 '15 at 08:45
@what if you're using jQuery in your project... a couple of lines would save you from further headaches. — Roko C. Buljan, Jan 02 '15 at 08:48

score 2 · Accepted Answer · edited May 23 '17 at 12:17

2

You should use css media queries. Yes Roko is right in that css media queries are not longer experimental and supported by most browsers. See caniuse to see that support is prevalent.

On how to use, the css media query with orientation, its has already been answered here. Look for the jsfiddle.

body {
    /* some portrait css */
}

@media only screen and  (orientation : landscape) {
    /* some landscape css */
}

For more information on CSS media queries, see the documentation by mozilla.

edited May 23 '17 at 12:17

Community

1
1

answered Jan 02 '15 at 08:35

maskie

447
4
8

Does that code mean that the `@media`-CSS gets ignored by browsers not supporting `@media`-queries, or will they *always* apply it? – Jan 02 '15 at 08:40
Don't forget to add to your answer the use of `-vendor-` prefixes (like: `-ms-`, `-webkit-`...) – Roko C. Buljan Jan 02 '15 at 08:46
2

the css media query will be ignored if the browser does not support it. To be specific, in your case, IE8 does not support CSS media queries. This stack overflow link discusses alternatives if you really have to support IE8. http://stackoverflow.com/questions/5769493/ie8-support-for-css-media-query – maskie Jan 02 '15 at 08:48

score 0 · Answer 2 · answered Jan 02 '15 at 08:38

0

You cannot, simple as that. In your question you rule out all technologies that could possibly let you detect window orientation.

answered Jan 02 '15 at 08:38

Jukka K. Korpela

195,524
37
270
390

Not a solution but it answers the question pretty trivially well. – Roko C. Buljan Jan 02 '15 at 08:43

Detect browser window orientation in CSS

2 Answers2