8

We're building an HTML5/JavaScript app developed for tablets, and we want to lay out my screens differently in landscape versus portrait.

Originally, we were capturing orientation change notifications, and keeping track of the current orientation (generally reported as 0, 90, -90 or 180 degrees -- see this question). Unfortunately, different devices report different orientations as "0". That link argues that it's a bug, but there's some evidence that this is working-as-designed -- for example, this article suggests that "landscape" is the default orientation and those devices report an orientation of "0" when held in landscape mode.

We next tried to just look at the actual screen size, assuming that when width was greater than height, we were in landscape mode. But this algorithm gets confused when the on-screen keyboard is displayed -- when the keyboard is displayed, the dimensions of the visible area are returned. When the device is, strictly speaking, in portrait mode, but the portion of the screen not obscured by the keyboard is wider than it is tall.

The response to this question is quite old. Is that still the best answer? Does anyone have a good algorithm that takes the keyboard visibility into consideration?

Community
  • 1
  • 1
bcholmes
  • 944
  • 1
  • 9
  • 23
  • How about capturing orientation change notifications, but getting the current orientation from the actual screen size? (This fails in the corner case where the user opens the keyboard in portrait mode, goes to landscape, and back to portrait.) – Andres Riofrio Dec 13 '12 at 19:54
  • 3
    Is this for a mobile web app/site? If so look into media queries and test against the width to change stuff around. If you need to evaluate it in javascript code, generally the width of the device can tell you as well (track the width to see which is bigger to know landscape vs portrait. Dont check the height). – agmcleod Dec 13 '12 at 20:08
  • 1
    what is your use-case, anyway? It seems that simply including `` and doing a media query on `screen and (min-width: 500px) { /* landscape styles */ }` would do the trick (and work on desktops). – Andres Riofrio Dec 13 '12 at 20:24
  • @agmcleod: thanks for the suggestion of the media query. I'm trying some experiements with that. – bcholmes Dec 13 '12 at 20:33
  • @AndresRiofrio: I currently have a design where, in landscape mode, there's a navigation list in a left-hand bar. When the user clicks an item from the list, the main body changes to the app area related to that item. In portrait mode, the list transitions to the app area. You might be right that I can accomplish this using CSS media queries. My initial thought was related to trying to find an implementation of an isPortrait() JavaScript function (all the current orientation logic uses such a function). I'm now trying this approach out: http://davidwalsh.name/orientation-change Thx! – bcholmes Dec 13 '12 at 20:39

1 Answers1

4

http://jsfiddle.net/jjc39/

Try this:

<span id="orientation">orientation</span>​

$(document).ready(checkOrientation);
$(window).resize(checkOrientation);

function checkOrientation() {
    var orientation = "Portrait";
    var screenWidth = $(window).width();
    var screenHeight = $(window).height();
    if (screenWidth > screenHeight) {
        orientation = "Landscape";
    }
    $("#orientation").html(orientation);
}​
Patrick Gunderson
  • 3,263
  • 17
  • 28
  • That's a lot cleaner that what I had. It still trips, though, on the keyboard case. See: http://blog.bcholmes.org/wp-content/uploads/2012/12/jsfiddleOnTablet.png – bcholmes Dec 13 '12 at 22:42
  • Sure does. In jsfiddle, you're inside an iFrame that gets resized down to accommodate the keyboard. I wonder if this would still happen if you had the full outer body tag to evaluate $(window) dimensions. – Patrick Gunderson Dec 14 '12 at 01:19
  • I'll try a few frame-free experiments and see. Thanks again. – bcholmes Dec 14 '12 at 04:18
  • I'll take this as the closest to the answer I've found, although I haven't seen anything that seems close to a good solution to the keyboard problem. – bcholmes Dec 19 '12 at 16:12
  • I would recommend replacing $(window).width() and $(window).height() with window.innerHeight and window.innerWidth. I've found that jQuery height() and width() is often incorrect – andersra Aug 08 '14 at 17:54
  • I haven't found that, but that minor change should probably be made for speed anyway. – Patrick Gunderson Aug 08 '14 at 22:27