8

タブレット用に開発された HTML5/JavaScript アプリを構築しており、画面を横向きと縦向きで異なるレイアウトにしたいと考えています。

もともと、向きの変更通知をキャプチャし、現在の向きを追跡していました (通常、0、90、-90、または 180 度として報告されます。この質問を参照してください)。残念ながら、異なるデバイスは異なる向きを "0" として報告します。そのリンクはそれがバグであると主張していますが、これが設計どおりに機能しているという証拠がいくつかあります.モード。

次に、幅が高さよりも大きい場合は横向きモードであると仮定して、実際の画面サイズを調べてみました。しかし、このアルゴリズムは、オンスクリーン キーボードが表示されると混乱します。キーボードが表示されると、可視領域のサイズが返されます。厳密に言えば、デバイスが縦向きモードであるが、キーボードで覆われていない画面の部分が高さよりも幅が広い場合。

この質問に対する回答はかなり古いものです。それはまだ最良の答えですか？キーボードの可視性を考慮した優れたアルゴリズムを持っている人はいますか?

4

1 に答える 1

4

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);
}​
于 2012-12-13T21:51:12.327 に答える