的JavaScript算法来确定片剂的取向 [英] JavaScript algorithm to determine orientation of tablet

问题描述

我们正在构建为平板电脑开发的HTML5 / JavaScript的应用程序，我们希望以不同的布置我的屏幕在横向与纵向。

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

本来，我们捕捉方向变化的通知，并保持当前的方向（一般报道为0，90，-90度或180度的轨道 - 看<一href="http://stackoverflow.com/questions/10131782/detect-orientation-using-javascript-on-android-devices">this问题）。不幸的是，不同设备报告<一href="http://forum.jquery.com/topic/orientationchange-event-returns-wrong-values-on-android">different方向为0。该链接认为这是一个错误，但有一些证据表明，这是工作，作为设计的 - 例如，的这篇文章认为，风景是默认的方向和这些设备报告的方向0时，在横向模式下举行

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.

响应<一个href="http://stackoverflow.com/questions/1649086/detect-rotation-of-android-phone-in-the-browser-with-javascript">this问题是很老。是不是仍是最好的答案吗？有没有人有一个很好的算法，需要键盘可见性的考虑？

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?

推荐答案

http://jsfiddle.net/jjc39/

试试这个：

<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);
}​

这篇关于的JavaScript算法来确定片剂的取向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！