How to get media query to recognize landscape orientation?

Question

I have a JQM app with a fixed footer. In order to get around a rendering issue when the keyboard is shown, I found some CSS3 media queries that set the visibility of the .ui-footer-fixed class to visible if the min-height of the screen is more than a certain number of pixels based on the orientation.

The portrait mode screen size and orientation is detected correctly and shows/hides the class as I would expect when the keyboard is displayed and hidden. When in landscape mode, however, the landscape orientation is not detected and the default visibility of hidden takes over.

This is the pertinent script that sets up these media queries:

var win = $(window),
    height = win.height(),
    width = win.width();

document.write([
    "<style>",
    ".ui-footer-fixed { visibility: hidden; }",
    "@media screen and (orientation: portrait) and (min-height: " + (Math.max(width, height) - 10) + "px)",
    "{ .ui-footer-fixed { visibility: visible; }",
    "@media screen and (orientation: landscape) and (min-height: " + (Math.min(width, height) - 30) + "px)",
    "{ .ui-footer-fixed { visibility: visible; }",
    "</style>"
].join(" "));

What am I doing wrong?

Thanks, Matthew

Media queries aren't supposed to care about orientation. They can detect screen size, screen resolution, and whether there's a screen or printout. Perhaps you can use JavaScript to detect whether or not a form element is focused (implying the keyboard is shown)? Or, since you're using JavaScript, simply check if `win.width() > win.height()` -- if it is, you're in landscape mode. — Blazemonger, Apr 04 '14 at 18:59
Easy way, listen to `orientauonchange` event, if landscape, unfix both toolbars. — Omar, Apr 04 '14 at 19:52
but the browser (either Chrome in iPhone5 emulation mode, or an actual iPhone) does respond to changing from portrait to landscape because the fixed footer appears and disappears when I toggle the orientation. It just doesn't appear to be able to match my landscape media query. FWIW, this happens whether I load the page with the device in landscape or if I change orientation after I load the site. — Matthew Belk, Apr 04 '14 at 20:33
So you want to hide footer only when orientation is landscape? — Omar, Apr 04 '14 at 21:16
I've made this [demo](http://jsfiddle.net/Palestinian/X2HB8/) and tested it on iPhone 5 for both Safari and Chrome. It performs as it should on Safari, but not on Chrome. I dont know why Chrome isn't dealing with `display: none;` well. — Omar, Apr 04 '14 at 23:25
No, I want the fixed footer to be hidden when the keyboard is displayed, because JQM (at least on iPhone) doesn't re-render the fixed footer very well in response to the keyboard. — Matthew Belk, Apr 07 '14 at 14:04

score 0 · Answer 1 · edited May 23 '17 at 10:27

0

The answer lay in the original solution I tried, but there were some closing curly braces missing from the two @media queries.

The solution came from this SO post: jquery-mobile-hide-fixed-footer-when-keyboard

edited May 23 '17 at 10:27

Community

1
1

answered Apr 07 '14 at 14:07

Matthew Belk

1,904
2
20
28

score 0 · Answer 2 · answered Oct 20 '15 at 01:09

0

In answer to the question how to get media query to recognize landscape orientation?

@media screen and (orientation:landscape)
{
   body
   {
      background: red;
   }
}

answered Oct 20 '15 at 01:09

svnm

22,878
21
90
105

How to get media query to recognize landscape orientation?

2 Answers2