Geek Answers Handbook

JavaScript algorithm for determining tablet orientation

We are creating an HTML5 / JavaScript application designed for tablets, and we want to lay out our screens differently in landscape or portrait.

Initially, we recorded notifications of changes in orientation and tracked the current orientation (usually reported as 0, 90, -90 or 180 degrees - see this question ). Unfortunately, different devices report different orientations as "0" . This link claims to be a bug, but there is some evidence that it works differently - for example, this article assumes that “landscape” is the default orientation, and these devices report a “0” orientation when held in landscape mode .

Then we tried to just look at the actual size of the screen, believing that when the width is greater than the 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, strictly speaking, is in portrait mode, but the part of the screen that is not covered by the keyboard is wider than high.

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

+8
javascript android
source share
1 answer

http://jsfiddle.net/jjc39/

Try the following:

<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); }​
+4
source share

More articles:


All Articles